在項目中,會遇到相同的路由,可能需要使用相同的頁面(容器組件),如果點不同的路由需要重新查詢,但是發現沒有重新進容器的渲染周期,代碼如下:
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> );