Реагируйте - что делает Switch? (Реагируют-маршрутизатор-DOM)

Question

У меня есть следующий код:

import {Route, Switch} from 'react-router-dom';

<Route exact path="/" component={Landing} />
<div className="container">
  <Route path="/register" render={() => (
    <Register {...this.props} />
  )}/>
  <Route path="/login" render={() => (
    <Login {...this.props}/>
  )}/>
  <Switch>
    <PrivateRoute path="/dashboard" component={Dashboard}/>
  </Switch>
  <Switch>
    <PrivateRoute path="/create-profile" component={CreateProfile}/>
  </Switch>

После входа пользователя (используя /login) он перенаправляется на /dashboard.Однако, если я удаляю <Switch> из /dashboard, пользователь по-прежнему перенаправляется на /dashboard, но компонент Dashboard не отображается.

Так как именно это <Switch> работает?

Answer 1

Переключатель отображает первого дочернего элемента <Route> или <Redirect>, который соответствует местоположению.

Чем это отличается от использования группы <Route> с?

<Switch> уникален тем, что он отображает маршрут исключительно. Напротив, каждый <Route>, который соответствует местоположению, рендерится включительно. Рассмотрим этот код:

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

Если URL-адрес /about, то <About>, <User> и <NoMatch> будут отображаться, поскольку все они соответствуют пути. Это сделано специально, и это позволяет нам составлять <Route> s в наших приложениях разными способами, такими как боковые панели и хлебные крошки, вкладки начальной загрузки и т. Д.

Иногда, однако, мы хотим выбрать только один для рендеринга. Если мы находимся на /about, мы не хотим также совпадать с /:user (или показывать нашу страницу "404"). Вот как это сделать с помощью Switch:

import { Switch, Route } from 'react-router'

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

Подробнее об этом можно узнать в реагирующем маршрутизаторе Документация