react-router@3
react-intl@2.4.0
<Provider store={store}>
<IntlProvider key={lang} locale={lang} messages={i18nConfig[lang].messages}>
<Suspense fallback={<div>Loading...</div>}>
<InjectIntlContext>
<Router history={browserHistory}>
<Route path="/login" component={LoginPage} />
<Route path="/" component={Layout}>
<Route path="/dashboard" components={{ main: DashboardPage }} />
<Route path="*" components={{ main: NoMatch }}></Route>
</Route>
</Router>
</InjectIntlContext>
</Suspense>
</IntlProvider>
</Provider>
lang
是保存在redux store里面的,用户可以通过页面操作去变更lang
,然而变更的时候浏览器会报错如下:
You cannot change <Router routes>; it will be ignored
报错原因:IntlProvider包在router的外面,
lang
的变更会引发内部render,但是路由列表实际没有变化,于是响应路由器报错了。解决办法:在
<IntlProvider>
上设置key值,来强制创建新实例并重新呈现它下面的所有内容,也就不存在路由变更的问题了。