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

Question

我正在创建多语言应用。我正在使用：React Intl; React Router（最新版本v4）;终极版。
 我的应用中的路径将取决于区域设置：

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

如果用户有locale = en-US并输入localhost:8080 app，请将他重定向到localhost:8080/en

如果用户有locale = uk并输入localhost:8080应用，则会在不更改位置路径名的情况下向他显示与地址localhost:8080/对应的组件。

Routers.jsx

const Routes = ({ lang }) => (
  <BrowserRouter basename={lang}>
      <Route render={props => <Header {...props} />} />
      <Switch>
        <Route exact path={`/:${lang}`} component={Landing} />
        <Route exact path={`/:${lang}/news`} component={News} />
        <Route component={FourOhFour} />
      </Switch>
  </BrowserRouter>
);

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

目前它没有按预期工作。
如果我输入no match或localhost:8080/，我会在路线配置中获得localhost:8080/en。

Answer 1

这是我解决问题的方法。 重定向工作正常，前缀添加到道具。

Routers.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);

RootRouter.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);
  }
};

Answer 2

带有 react-router 的 changeLanguage 函数：

  changeLanguage(lang) {

    // Get the path without the language path
    const oldPath = this.props.location.pathname.replace("en/", "").replace("fr/", "")
    // new path, with the /en path (if english is asked)
    const newPath = lang === "en" ? "/en" + oldPath : oldPath

    this.setState({
      redirect: newPath
    })
 
    // Change the language
    i18n.changeLanguage(lang)
  }

在渲染方法中：

  render() {

    const redirect = this.state.redirect ? <Redirect to={this.state.redirect} /> : null

    return (
      <UncontrolledDropdown>
        {redirect}
        <DropdownToggle nav caret>
        {this.props.lang === 'fr' ? "FR" : this.props.lang === 'en' ? "EN" : ''}
        </DropdownToggle>
        <DropdownMenu right>
          <DropdownItem onClick={() => this.changeLanguage("fr")} >
            Français
          </DropdownItem>
          <DropdownItem onClick={() => this.changeLanguage("en")}>
            English
          </DropdownItem>
        </DropdownMenu>
      </UncontrolledDropdown>
    )
  }
}