react-router中不同路由使用相同组件重新渲染问题
在项目中,会遇到相同的路由,可能需要使用相同的页面(容器组件),如果点不同的路由需要重新查询,但是发现没有重新进容器的渲染周期,代码如下:
export default ({match}) => ( <Switch> <Route path={`${match.url}/med-library`} component={medicineLibraryViews.MedLibrary} /> <Route path={`${match.url}/trans-library`} component={transLibraryViews.MedLibrary} /> <Redirect to="/404"/> </Switch> );
最后通过给两个相同的route设置不同的key渲染解决,修改后代码如下:
export default ({match}) => ( <Switch> <Route path={`${match.url}/med-library`} component={medicineLibraryViews.MedLibrary} key='/med-library' /> <Route path={`${match.url}/trans-library`} component={transLibraryViews.MedLibrary} key='/trans-library'/> <Redirect to="/404"/> </Switch> );
努力吧,为了媳妇儿,为了家。。。