Для чего нужен Switch react-router-dom

Question

Видел, что есть

<Router> 
    <Switch>
        <Route exact path='/'> <Home /> </Route>
        <Route exact path='/about'> <About /> </Route>
        <Route exact path='/contact'> <Contact /> </Route>
    </Switch>
</Router>

А есть

<Router> 
        <Route exact path='/'> <Home /> </Route>
        <Route exact path='/about'> <About /> </Route>
        <Route exact path='/contact'> <Contact /> </Route>
</Router>

Можете, пожалуйста, объяснить в каких случаях нужно использовать Switch и для чего он служит?

Answer 1

В общем случае, он позволяет выбрать первый попавшийся маршрут который соответствует текущему pathname.

Например у нас есть 2 роута:

<Route path="/about" .../>
<Route path="/:id" .../>

маршрут /about соответствует и первому и второму маршруту. Для того чтобы в приложении не отобразились обе компоненты соответствующие этим маршрутам, нужно обернуть из в Switch

<Switch>
    <Route path="/about" .../>
    <Route path="/:id" .../>
</Switch>

БЛОГ НА HUSL

Для чего нужен Switch react-router-dom

Ответы (1 шт):