不能依赖 React Router 做多语言网站

Question

我正在尝试使用 React 制作多语言 SPA 并依赖 React-Router。

这里是入口文件的简化版：

// define the routes for each language ..
const InnerRoutes = (
    <Route>
        <IndexRoute page="home" component={InnerPage}></IndexRoute>
        <Route path="(:page)" component={InnerPage}></Route>
    </Route>
);

// define the routes for all the languages, using InnerRoutes .. 
const AllRoutes = (
    <Router history={browserHistory}>
        <Route path='/' component={App} language="bg">
            {InnerRoutes}
            <Route path="en" language="en">
                {InnerRoutes}
            </Route>
        </Route>
    </Router>
);

// and render our app ..
ReactDOM.render(
    AllRoutes,
    document.getElementById('app')
);

所以，我有App 顶级组件和InnerPage 组件。

问题是：

1. 当导航发生变化时 - InnerPage 更新并（最终）重新渲染。

内部InnerPage：

1. 我可以通过page 属性访问请求的页面。
2. 很遗憾 - 我无权访问 language 属性。

这就是为什么InnerPage 无法从端点提取数据 - 它知道page，但不知道language。

Answer 1

路由器将routes prop 传递给所有路由组件，即匹配路由的集合。例如，在 / 上，它看起来像这样：[{ path: '/', language: 'bg'}, { }, { page: 'home' }]。

因此，根据您希望如何处理不同匹配路由声明没有或多种语言的情况，您可以执行以下操作：

const lang = this.props.routes.reduce((lang, route) => { 
  return route.language || lang;
}, defaultLang);

这将优先考虑内部路由给出的语言。

查看您的路线配置，我还需要提及两件事：

1. 在您的 InnerRoutes 中，<IndexRoute page="home" ... /> 和 <Route path="(:page)" ... /> 的页面值显示方式不同。前者是路由上的道具（如language），可以通过this.props.route.page访问，而后者是URL参数（this.props.params.page）。

2. 英语<IndexRoute> 不可达，因为保加利亚语:page 路由在前面并匹配。您可以通过向上移动英语路线来解决此问题。

这是一个 jsbin，展示了我提到的几点：http://jsbin.com/siqake/5/edit?js,output