Как остановить сопоставление маршрутизатора при первом совпадении в неоднозначной маршрутизации в ReactJS

Question

В моем проекте у меня есть маршруты для разных страниц. Я хочу остановить выполнение при первом сопоставлении маршрута. Мой файл 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. Даже после использования switch мой второй компонент LinkChanger называется. Есть ли какой-нибудь способ остановить роутеры в первом матче.

Answer 1

Попробуйте обернуть 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>

Answer 2

Это сработало, когда я заменил 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>

Answer 3

 <Switch>
    <div>
    {
         routes.map( (route, index) =>
         <Route key={index} exact={route.exact} path={route.path} component={(props)=><route.component {...props} isAuthed={true} />}/>)
    }
 </Switch>