6

我正在创建多语言应用程序。我正在使用：React Intl；反应路由器（最新 v4）；还原。
我的应用程序中的路径将取决于语言环境：

/ <-- 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/而无需更改位置路径名。

路由器.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/or ，我会进入路线配置localhost:8080/en。

4

2 回答 2

1

这是我的解决方法。重定向正在工作，并且前缀被添加到道具中。

路由器.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);
  }
};
于 2017-09-10T22:07:38.640 回答
0

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>
    )
  }
}
于 2021-02-17T11:09:24.277 回答