记录一下,现在的实际场景是,同一个模块的两个url用的是同一个页面模块,一开始url切换的时候页面并没有刷新,也就是说,即使页面来回切换,url不同,componentDidMount 也只执行一次,这是由于Router 的 Key 相同 要解决这个问题,设置两个不一样的key就好
routeArr = [
{
path: '/project/list/:id',
component: ProjectPage
}
]
<Switch>
{routeArr.map(route => {
const Item = route.component;
return (
<Route
key={route.path}
path={route.path}
exact={route.exact}
render={props => {
return (
<Item {...this.props} />
)
}}
/>
);
}
)}
</Switch>
由上面例子所示,由于两个侧边栏,一个url 是 ‘/project/list/111’, 一个是 ‘/project/list/222’, 所以他们都可以匹配 '/project/list/:id‘, 这也到这他们 Route 的key属性一样,改一下就好了
routeArr = [
{
path: '/project/list/111',
component: ProjectPage
},
{
path: '/project/list/222',
component: ProjectPage
}
]