react-intl更新lang时引起路由变更报错

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,然而变更的时候浏览器会报错如下:

image.png

You cannot change <Router routes>; it will be ignored
报错原因:IntlProvider包在router的外面,lang的变更会引发内部render,但是路由列表实际没有变化,于是响应路由器报错了。
解决办法:在<IntlProvider>上设置key值,来强制创建新实例并重新呈现它下面的所有内容,也就不存在路由变更的问题了。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点,受到很多朋友的关注,都强烈要求再出多些R...
    浪子神剑阅读 10,240评论 6 106
  • 包含 react基础 react传值 react路由 和redux管理 和react-redux reactDom...
    栀璃鸢年_49a3阅读 1,266评论 0 1
  • 函数是面向过程的,函数的调用不需要主体,而方法是属于对象的,调用方法需要一个主体-即对象。 npm install...
    Gukson666阅读 524评论 0 3
  • 突然想起了一部电影 河东狮吼 哈哈,当初的天真…… 他会为我一边暂停一边认真的记下台词…… 告诉我 老婆我背下...
    李大女儿阅读 191评论 0 0
  • 5.1个有符号字数组以0为结束标志,编程求这个数组的最大值、 最小值、平均值。 终于弄明白这道题怎么做了,昨天调了...
    魔一方阅读 749评论 0 0

友情链接更多精彩内容