React动态路由切换,组件没有重新挂载

  • A+
所属分类:Web前端
摘要

  2021年8月24日,开发公司的react H5项目,遇到了一个bug,关于动态路由切换组件没有重新挂载的问题

  2021年8月24日,开发公司的react H5项目,遇到了一个bug,关于动态路由切换组件没有重新挂载的问题

  事情的原因是这样的,我开发一个页面,是一个培训平台的课程详情,然后页面上有关联的其他课程,我发现在在跳转的时候,路由改变了, 但是页面没刷新,换句话说,页面也刷新了,但是没有重新加载组件,即没有重新调用接口,从后台获取数据。

  简单描述,就是一个detail页面中跳到其他detail页面中,组件没有重新挂载,解决方法,在处理成路由组件时,对组件进行处理,添加key,一旦key不同,则会重新挂载组件,不会复用之前的组件。

export withRouter((props)=><UserAccount {...props} key={props.location.pathname})