响应路由器中的多语言支持

我正在构建语言首选项是URL一部分的多语言网站，例如，响应路由器中的多语言支持

http://example.com/<somepage>  (Russian, default) 
http://example.com/en/<somepage> (English) 
http://example.com/jp/<somepage> (Japanese) 
http://example.com/../    (etc)

一切正常，当我使用的前缀对所有语言：

<Route path="/:lang"> 
    <Route path="somepage" component={Somepage}/> 
</Route>

但对于默认语言，我并不需要在网址的语言，如实例所示。在变化无常的路由器可以通过在路径中使用正则表达式来解决：

path: '/:lang([a-z]{2})?/<somepage>'

但它不工作，在路由器的反应，因为路径必须是一个字符串，而不是正则表达式。任何想法如何处理这个用例？

来源

2015-11-17 Oleg Martynov

你有没有试过重复你的路线？似乎迄今为止为我工作。

var innerRoutes = (
    <Route> 
    <Route path="somepage" component={Somepage}/> 
    <Route path="otherpage" component={Otherpage}/> 
    </Route> 
); 

var routes = (
    <Route path="/" component={App}> 
    {innerRoutes} 
    <Route path=":lang"> 
     {innerRoutes} 
    </Route> 
    </Route> 
);

来源

2016-01-29 02:05:18 mikhuang

innerRoutes怎么翻译呢？我必须逐一列出所有路线？如果是这样，当用户从我的应用程序更改语言环境时，如何检索正确的翻译路径？ – cl0udw4lk3r

你的路线需要看起来像：

<Router history={createBrowserHistory()}> 
    <Route component={App}> 
    <IndexRoute component={Home} /> 
    <Route path=':lang/'> 
     <Route path='about' component={About} /> 
    </Route> 
    <Redirect from='*' to='ru/about' /> 
    </Route> 
</Router>

在:lang/尾随斜杠表示，如果URL中包含之后出现（如/de/about）只会匹配否则有Redirect用贪婪的匹配将始终重定向到您在to参数中指定的页面。你可以阅读更多关于Route Matching in the docs。

来源

2015-11-17 12:28:13 knowbody

我不需要一个重定向，我希望网址和seo的目的完全一样。 –

我没有改变你的URL的外观，他们看起来完全是你希望他们看起来如何。我只是告诉你可以用React Router实现它的方式。阅读路线匹配文档，了解我们如何匹配路线。 – knowbody

我多次阅读文档，但我无法理解如何在没有正则表达式的情况下实现此类行为。下面的代码工作就像我想要的，但它看起来很丑，我不喜欢这样的路线重复： <！ - language：lang-jsx - > –

响应路由器中的多语言支持

回答

相关问题