React Router не переключается на неосновные маршруты

Question

Я настраиваю 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>

Но маршрутизатор продолжает отображать только страницу AnonHome и / или домашнюю страницу в этом маршруте /, а не маршрут /explore (или любой другой). Что я делаю неправильно? Как я могу заставить его использовать правильные компоненты вместо того, чтобы всегда показывать компоненты базового маршрута?

Answer 1

Вы можете использовать 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>

Answer 2

Краткий ответ: вам нужно передать булеву опору 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 prop, потому что '/' не точно равно '/ root/other/folder'.