Компонент не отображается повторно после связывания на react-router

#javascript #reactjs #react-router

Вопрос:

У меня есть выпадающее меню (созданное при выборе / выборе) в моем заголовке. Как и планировалось, когда пользователь выбирает пункт в выпадающем меню, react-router изменит URL-адрес и создаст страницу перезапуска. У меня ошибка на последнем этапе. URL-адрес изменяется, но страница не отображается повторно

Ссылка на песочницу

1. Можете ли вы уточнить?

2. Используемый BrowserRouter вами in SelectRouter только переносит выделение. BrowserRouter Содержит контекст, который используется Link Route компонентами and . Чтобы устранить эту проблему, вы должны удалить BrowserRouter from SelectRouter и добавить его в свой App , убедившись, что оба Header и Route являются дочерними (вложенными или прямыми) BrowserRouter

3. @JacobSmit, это работа! Большое вам спасибо!

Ответ №1:

Вы должны использовать <Swtich> с маршрутами, чтобы выбрать, где будут отображаться соответствующие маршруты. И оберните все это в <BrowserRouter> or <HashRouter> .

 <div className="App">
  <Router>
    <Header />

    <Switch>
      <Route path="/stats" component={Stats}></Route>
    </Switch>
  </Router>
</div>

Ссылка на изолированную среду

1. Switch не требуется для отображения маршрутов. Switch используется для отображения только первого маршрута, который сопоставляется, а не любых последующих маршрутов, которые также могут быть сопоставлены.

2. Действительно, вы правы. Но я предполагаю, что это то, что он хочет сделать

Ответ №2:

Все компоненты маршрута и ссылок должны быть обернуты BrowserRouter, самый простой способ сделать это — обернуть все в свой App.js возвращает инструкцию компонентом BrowserRouter.

 import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Header from "./components/Header";
import Stats from "./pages/Stats/Stats";

export default function App() {
  return (
    <Router>
      <div className="App">
        <Header />

        <Route path="/stats" exact>
          <Stats />
        </Route>
      </div>
    </ Router>
  );
}