Question

我们已经对应用程序进行了本地化，现在我需要在所有路由中都包含lang，我遇到了可以实现我想要的代码，但是在react-router v4中却遇到了麻烦

这是我正在引用的代码 How to set and handle language in react-router from?

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

// 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之类的路由，即使末尾没有/阻止使用{{1 }}。似乎在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

1 个答案: