React Router не переключается на небазовые маршруты
Я настраиваю React Router в проекте, который ранее использовал Reach Router.
Раньше маршруты с Reach выглядели так:
import { Router } from '@reach/router';
...
<Router>
{anon ? <AnonHomepage /> : <Homepage />}
<Explore path = "explore/:category" />
</Router>
И затем, переключившись на React Router, я настроил свой файл следующим образом:
import { BrowserRouter, Switch, Route } from 'react-router-dom';
...
<BrowserRouter>
<Switch>
{anon ? (
<Route path = "/" component = {AnonHomepage} />
) : (
<Route path = "/" component = {Homepage} />
)}
<Route
path = "/explore/:category"
component = {Explore}
/>
</Switch>
</BrowserRouter>
Но маршрутизатор продолжает показывать только AnonHomepage и/или домашнюю страницу в этом / маршруте, а не /explore (или любом другом) маршруте. Что я делаю неправильно? Как я могу заставить его использовать правильные компоненты вместо того, чтобы всегда показывать компоненты базового маршрута?
Ответы 2
Вы можете использовать exact опора на маршруте
import { BrowserRouter, Switch, Route } from 'react-router-dom';
...
<BrowserRouter>
<Switch>
{anon ? (
<Route exact path = "/" component = {AnonHomepage} />
) : (
<Route exact path = "/" component = {Homepage} />
)}
<Route
path = "/explore/:category"
component = {Explore}
/>
</Switch>
</BrowserRouter>
Краткий ответ: вам нужно передать логическую опору exact на ваш корневой маршрут, например:
<Switch>
<Route exact path='/' component = {YourComponent} />
<Route path='path/to/other/component' component = {OtherComponent) />
</Switch>
Объяснение: Ознакомьтесь с документацией по компоненту <Switch>здесь. Switch отображает только маршрут первый, path prop которого соответствует текущему местоположению. По сути, когда React Router получает новую навигацию и ищет маршрут для ее сопоставления, он проверяет путь навигации с помощью пути Route, как если бы путь Route был регулярным выражением. Поскольку путь навигации каждый на вашем веб-сайте включает корневой путь, path='/' будет соответствовать всем возможным переходам. Поскольку корень Route является первым маршрутом в списке, он будет тестироваться первым маршрутом Switch, и поскольку этот тест обязательно приведет к совпадению, Switch никогда не проверяет другие маршруты, он просто отображает корневой компонент.
Добавление реквизита exact к маршруту делает то, что вы ожидаете: он не позволяет Switch обнаружить совпадение, если только путь в Route не является точно путем навигации. Таким образом, '/root/other/folder' будет соответствовать нет '/' на маршруте, для которого установлено свойство exact, потому что '/' не равно точно, равному '/root/other/folder'.
Спасибо! Это
exactто что мне было нужно!