在 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>

链接到沙盒