如何在ReactJS中的模糊路由中的第一次匹配时停止路由器匹配

Posted 2021-04-06

在我的项目中，我有不同页面的路线。我想在第一次路线匹配时停止执行。我的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>