在 react-router 上鏈接后組件不會重新渲染

Question

我的 header 中有一個下拉菜單（在選擇/選項上創建）。 按照計划，當用戶在下拉菜單中選擇項目時，react-router 將更改 URL 並重新渲染頁面。 我在最后階段有一個錯誤。 URL 更改，但頁面未重新呈現

沙盒鏈接

Answer 1

所有 Route 和 Links 組件都應該由 BrowserRouter 包裝，最簡單的方法是通過 BrowserRouter 組件將所有內容包裝在 App.js 返回語句中。

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>
  );
}

Answer 2

您必須將<Swtich>與到 select 的路由一起使用，匹配的路由將在其中呈現。 並將所有這些包裝在<BrowserRouter>或<HashRouter>中。

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

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

鏈接到沙盒