无法在React路由器中正确添加前缀到路径

Question

我正在创建多语言应用程序。我正在使用：React Intl; React Router（最新v4）; Redux。
我的应用程序中的路径将取决于语言环境：

/ <-- default expecting this to be uk
/en
/ru
/news <-- uk
/en/news
/ru/news

如果用户拥有locale = en-US并进入localhost:8080应用，则将其重定向到 localhost:8080/en

如果用户拥有locale = uk并进入localhost:8080应用程序，则显示其对应于地址的组件localhost:8080/而不更改位置路径名。

Routers.jsx

/ <-- default expecting this to be uk
/en
/ru
/news <-- uk
/en/news
/ru/news

目前，它无法正常工作。
我no match在航线配置，如果我进入localhost:8080/或localhost:8080/en。

Answer 1

这是我的解决方法。重定向正在运行，并且前缀已添加到 props 中。

路由器.jsx

const Routes = ({ lang }) => (
  <BrowserRouter>
    <Route render={props => <Header lang={lang} {...props} />} />
    <Switch>
      <RootRouter
        exact
        path={'/:lang(en|ru)?'}
        lang={lang}
        component={Landing}
      />
      <Route
        exact
        path={'/:lang(en|ru)?/news'}
        render={props => <News {...props} lang={lang} />}
      />
      <Route component={FourOhFour} />
    </Switch>
  </BrowserRouter>
);

const mapStateToProps = state => ({ lang: getPrefix(state.locale) });
export default connect(mapStateToProps)(Routes);

根路由器.jsx

const RootRouter = ({ component: Component, exact, path, lang }) => (
  <Route
    exact={exact}
    path={path}
    render={(props: ContextRouter) =>
      props.location.pathname === '/' && lang !== '' ? (
        <Redirect to={`/${lang}`} />
      ) : (
        <Component {...props} lang={lang} />
      )}
  />
);

标头组件 (Contacts.jsx) 中更改 Click 事件区域设置的方法：

const changeLang = newLang => () => {
  if (lang !== newLang) {
    const newUrl = switchLangHepler(lang, newLang, location.pathname);
    setLocaleData(newLang);
    localStorage.setItem('lang', String(newLang));
    history.replace(newUrl);
  }
};