带有反应路由器的本地化子路径

Question

所以我正在将一个现有的大型应用程序转换为 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。一定有预先存在或通用的方法吗？

Answer 1

您可以将参数与 react router 一起使用。所以像

<Route path='/:language' component={App} />

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

Answer 2

一种方法

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

举个例子

您的链接将像

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>