在我的项目中,我有不同页面的路线。我想在第一次路线匹配时停止执行。我的route.js文件有这个代码
export default [
{
exact: true,
component: Home,
path: "/"
},
{
exact: true,
component: ShopingCart,
path: "/shopingcart"
},
{
exact: true,
component: LinkChanger,
path: "/:pathname"
}
];
我有一个使用这些route.js文件的文件
<Switch>
<Router history={history} >
<div>
{
routes.map( (route, index) =>
<Route key={index} exact={route.exact} path={route.path} component={(props)=><route.component {...props} isAuthed={true} />}/>)
}
</div>
</Router>
</Switch>
当我将链接更改为/ shopingcart时。首先调用组件ShopingCart,然后调用LinkChanger。即使在使用开关后,我的第二个组件LinkChanger也会被调用。他们以任何方式在第一场比赛时停止路由器。
尝试在Switch
内包装Router
-
<Router history={history}>
<Switch>
{
routes.map( (route, index) =>
<Route key={index} exact={route.exact} path={route.path} component={(props)=><route.component {...props} isAuthed={true} />}/>)
}
</Switch>
</Router>
<Switch>
<div>
{
routes.map( (route, index) =>
<Route key={index} exact={route.exact} path={route.path} component={(props)=><route.component {...props} isAuthed={true} />}/>)
}
</Switch>
当我用开关替换div时,它工作
<Router history={history}>
<Switch>
{
routes.map( (route, index) =>
<Route key={index} exact={route.exact} path={route.path} component={(props)=><route.component {...props} isAuthed={true} />}/>)
}
</Switch>
</Router>