将 react-router 转换为 v4：重定向所有路由以包含 lang

Question

我们已经本地化了我们的应用程序，现在我需要在所有路由中包含 lang，我遇到了可以做我想做的事情的代码，但在 react-router v4 中做同样的事情时遇到了麻烦

这是我引用的代码

这是我正在使用的示例代码，以便在将其集成到我们的应用程序之前使其正常运行：

// add lang to url if it's not present
function langRedirect(props) {
  console.log({ props });
  const defaultLang = 'en';
  const redirectPath = `/${defaultLang}${props.history.location.pathname}`;
  console.log(redirectPath);
  props.history.replace({ pathname: redirectPath, });
}

.....

<Switch>
  <Route path="/:lang/" render={() => <h1>testing... does nothing</h1>}>
    <Route path="/:lang/test" render={() => <h2>Test</h2>} />
    <Route path="/:lang/test2" render={() => <h2>Test2</h2>} />
  </Route>
  <Route path="*" render={langRedirect} />
</Switch>

这里发生的事情是，如果我去像 /test 这样的路线，开关仍然会捕获 /:lang/ 路线，即使最后没有 / 阻止去 /:lang/ 路线 langRedirect。似乎是 v4 中的不同行为。

Answer 1

好吧，在这个问题上花了几个小时后，我碰巧在发布问题后就弄明白了...

我不得不像这样在路线中添加 * <Route exact path="/:lang/*" render={() => <h1>Test</h1>}>

这是工作代码：

// add lang to url if it's not present
function langRedirect(props) {
  console.log({ props });
  const defaultLang = 'en';
  const redirectPath = `/${defaultLang}${props.history.location.pathname}`;
  console.log(redirectPath);
  props.history.replace({
    pathname: redirectPath,
  });
}

...

const TestingRoutes = () => {
  return (
    <Switch>
      <Route exact path="/:lang/*" render={() => <h1>Test</h1>}>
        <Route path="/:lang/test" render={() => <h2>Test</h2>} />
        <Route path="/:lang/test2" render={() => <h2>Test2</h2>} />
      </Route>
      <Route path="*" render={langRedirect} />
    </Switch>
  );
};

将 react-router 转换为 v4：重定向所有路由以包含 lang

Convert react-router to v4: Redirect all routes to include lang

reactjs

react-router

react-router-v4

react-router-dom