在 react-router 上链接后组件不会重新渲染答案

【问题标题】：The component is not re-rendered after linking on react-router在 react-router 上链接后组件不会重新渲染
【发布时间】：2020-11-26 23:54:57
【问题描述】：

我的标题中有一个下拉菜单（在选择/选项上创建）。按照计划，当用户在下拉菜单中选择项目时，react-router 将更改 URL 并重新渲染页面。我在最后阶段有一个错误。 URL 更改，但页面未重新呈现

Link to SandBox

【问题讨论】：

你能详细说明吗？
您在SelectRouter 中使用的BrowserRouter 仅包装选择。 BrowserRouter 包含由Link 和Route 组件使用的上下文。要解决此问题，您应该从SelectRouter 中删除BrowserRouter 并将其添加到您的App，确保Header 和Route 都是BrowserRouter 的子项（嵌套或直接）跨度>
@JacobSmit，成功了！非常感谢！

标签： javascript reactjs react-router

【解决方案1】：

您必须使用带有路由的<Swtich> 来选择匹配路由的渲染位置。并将所有这些都包含在 <BrowserRouter> 或 <HashRouter> 中。

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

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

Link to the sandbox

【讨论】：

Switch 不需要渲染路由。 Switch 用于渲染仅匹配的第一个路由，而不是任何可能也匹配的后续路由。
确实，你是对的。但我想这就是他想做的事

【解决方案2】：

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

【讨论】：