Поскольку вы новичок, мне потребуется немного больше времени, чтобы объяснить с помощью примеров, а также добавить несколько вещей, которые вам могут пригодиться.
Итак, как сказал Иддлер, Switch более или менее похож на условие «Switch case» в любых других языках, но обычно заканчивается первым найденным совпадением.
<Switch>
<Route path="/home" component={Home} />
<Route path="/about" component="{About} />
</Switch>
Это пример его самое основное c использование. Переключатель определяет начало и конец блока или условия. Каждый маршрут проверяет текущий путь. Предположим, мы работали над "www.test.com". Все "www.test.com" это root "/". Таким образом, маршрут проверяет путь после root. таким образом, если у вас есть «www.test.com/home», после «* 1053» стоит «/ home», поэтому в нашем примере выше будет загружен компонент «Home», а если у вас было «www.test.com/about», загружен компонент «About».
Помните, что вы можете использовать любые имена. Компоненты и пути не обязательно должны быть одинаковыми.
Бывают также случаи, когда вы можете использовать exact для совпадения с точным путем. это полезно, когда у вас есть похожие пути. например, "/ магазин" и "/ магазин / обувь". использование exact гарантирует, что Switch соответствует точным путям, а не только первому.
Например:
<Switch>
<Route exact path="/shop" component={Shop} />
<Route exact path="shop/shoes" component="{Shoes} />
</Switch>
Вы также можете использовать <Route... /> без <Switch>.
Например:
<Route path="/home" component={Home} />
, поэтому в отличие от прямых загрузок компонентов, когда вы просто загружаете компонент, например <Home /> Маршрутизаторы работают с URL-адресами.
Наконец, путь <Route... /> может занять массивы URL для загрузки одного и того же компонента.
Например:
<Switch>
<Route path={[ "/home", "/dashboard", "/house", /start" ]} component={Home} />
<Route exact path={[ "/about", "/about/management", "/about/branches" ]} component="{About} />
</Switch>
Надеюсь, это поможет. Дайте мне знать, если вам нужны какие-либо разъяснения. :)
ОБНОВЛЕНИЕ:
Вы не обязаны писать Маршрутизаторы в одном и том же формате всегда. ниже приведен еще один формат, который вы можете использовать:
<Router>
<Switch>
<Route path="/home">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Switch>
</Router>
Существуют такие примеры, как сейчас, где вы хотите иметь возможность обрабатывать то, что отображается при вводе неправильного URL. как 404 страницы. Вы можете использовать Router без пути. как обычный оператор switch, он становится вашим значением по умолчанию.
<Switch>
<Route path="/home" component={Home} />
<Route path="/about" component="{About} />
<Route component="{PageNotFound} />
</Switch>