React-Router 5: почему мой <A href="foo"> работает, а мой Нет?

Question

У меня есть то, что я считаю стандартной настройкой маршрутизации:

<BrowserRouter>
  <Switch>
    <Route component={SubPage} exact path="/sub/path" />
    <Route component={FrontPage} exact path="/" />
  </Switch>
</BrowserRouter>

Когда я вручную перехожу к /sub/path, все работает нормально. Когда я нажимаю стандартную ссылку (<a href="/sub/path">), она также работает нормально.

Однако, когда я использую <Link to="/sub/path"> (и нажимаю на нее), я перехожу к URL-адресу /sub/path .. ... но компонент для него не отображается. Вместо того, чтобы видеть подстраницу, я продолжаю видеть первую страницу, даже если URL-адрес изменяется.

Если я обновляю sh страницу или go вперед и назад, маршрутизатор срабатывает, но по какой-то причине использование Link не позволяет отображать маршрут. Кто-нибудь может подсказать, почему?

Answer 1

Маршруты и ссылки должны быть заключены в один и тот же экземпляр BrowserRouter. Убедитесь, что они оба используют один и тот же экземпляр BrowserRouter в своей предке.

Также не имеет нескольких экземпляров BrowserRouter или вообще любого маршрутизатора в вашем приложении

<BrowserRouter>
  <>
   <Link to="/sub/path">SubPage</Link>
   <Link to="/">Home</Link>
  <Switch>
    <Route component={SubPage} exact path="/sub/path" />
    <Route component={FrontPage} exact path="/" />
  </Switch>
  </>
</BrowserRouter>