使用react-router的本地化子路径?

时间:2017-01-06 11:37:23

标签: javascript reactjs localization react-router react-router-redux

所以我将一个大的现有应用程序转换为React。我们的本地化内容如下:

www.website.com/about      // english
www.website.com/es/about   // spanish
www.website.com/de/about   // german

所以我需要为每个语言环境声明路由,我假设是这样的:

<Route path='/' component={App} />
<Route path='/es' component={App} />
<Route path='/de' component={App} />

我想知道是否有更简洁的方法可以做到这一点?

另外,我希望所有链接都尊重基本路径,例如:

<Link to='/inbox' />

如果该用户的区域设置是西班牙语,则会自动转到/es/inbox。必须有预先存在的或常见的方法吗?

2 个答案:

答案 0 :(得分:1)

您可以使用反应路由器的参数。像

这样的东西
<Route path='/:language' component={App} />

因此,在组件中,您可以访问this.props.params.language将具有导航的任何内容。所以在组件中你可以处理那些逻辑

答案 1 :(得分:-1)

一种方法

您可以将locale或其他内容保留为route参数的静态language

作为一个例子

您的链接就像

www.website.com/locale/en/about    // english
www.website.com/locale/es/about   // spanish
www.website.com/locale/de/about   // german

路线就是这样的。

<Route path='/locale'/>
  <Route path='en' component={App} />
  <Route path='es' component={App} />
  <Route path='de' component={App} />
</Route>