关于动态路由切换组件没有重新挂载的问题

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

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

一开始，我以为当页面重新渲染时，会重新挂载组件，于是，我想到改变state，然后使页面重新渲染，借此重新调用接口，因为路由改变，即props中的location.path改变了，我在state中设置了一个key,记录path，但是后来发现行不通，因为重新渲染页面并不会重新调用接口，只有重新挂载组件才可以。

于是我开始想通过path的不同，然后给每个组件一个不同的key,重而将path不同的组件区分开，重新挂载组件，最后我想到了办法，(百度yyds!)在处理成路由组件的时候，对组件进行一个处理。即

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

经过处理后，一旦路由改变，react就会意识到这是不同的组件，不会复用之前的组件，会重新挂载组件，解决了动态路由切换组件没有重新挂载的问题