React Router v5 - 单击 <Link /> 不会重新渲染答案

【问题标题】：React Router v5 - Clicking <Link /> is not re-renderingReact Router v5 - 单击 <Link /> 不会重新渲染
【发布时间】：2020-07-11 01:33:58
【问题描述】：

据我了解，单击 React Router 的 <Link /> 组件应该会导致 <Router /> 中的所有内容重新渲染。

但是，在这个使用 React Router DOM v5.2 的简单示例应用程序中，情况似乎并非如此：

import React from "react";
import "./styles.css";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const Foo = () => {
  console.log("rendered");
  return null;
};

export default function App() {
  return (
    <Router>
      <Foo />
      <div className="App">
        <Link to="/">Home</Link>
        <br />
        <Link to="/foo">Foo</Link>

        <Route path="/" exact>
          <p>Home</p>
        </Route>
        <Route path="/foo">
          <p>Foo</p>
        </Route>
      </div>
    </Router>
  );
}

https://codesandbox.io/s/vigorous-water-2fuxt?file=/src/App.js

我错过了什么？

【问题讨论】：

为什么没有Route 组件注册路径？
我会添加它，看看它是否有影响
Route 是路由的关键组件。它们与Link 的to 属性相关，以在指定路径呈现内容。
嗯，我现在明白了。我想我期待<Router> 的所有孩子重新渲染，但似乎只有<Route> 的孩子重新渲染。而且，似乎并非所有<Route>s 都重新渲染
你能澄清一下“期望路由器的所有孩子重新渲染”是什么意思吗？您的意思是当您转到与特定 Route 内的特定组件/jsx 相关的路径 /foo 时，其他路由/页面也会呈现？如果您在 /foo 上，您希望 / 单独重新渲染？

标签： reactjs react-router

【解决方案1】：

如果您实际上在带有路径的路由上渲染Foo，那么当该路径匹配时它会重新渲染。没有路径的路由将总是匹配并被渲染，因此它在挂载时被渲染并且不会重新渲染，因为它没有任何道具也没有任何要更新的状态（如果包含Router 的组件重新安装/更新）。

Router 每次渲染一次

<Route>
  <Foo />
</Route>

每个路径匹配重新渲染一次

<Route path="/foo">
  <Foo />
</Route>

考虑这个演示

const Foo = () => {
  console.log("rendered Foo");
  return null;
};
const Bar = () => {
  console.log("rendered Bar");
  return null;
};

export default function App() {
  const [c, setC] = useState(0);

  return (
    <Router>
      <Route>
        <Foo />
      </Route>

      <button onClick={() => setC(c => c + 1)}>Rerender Router</button>

      <div className="App">
        <Link to="/">Home</Link>
        <br />
        <Link to="/bar">Bar</Link>

        <Route path="/" exact>
          <p>Home</p>
        </Route>
        <Route path="/bar">
          <Bar />
        </Route>
      </div>
    </Router>
  );
}

【讨论】：

【解决方案2】：

据我了解，单击 React Router 的 <Link /> 组件应该会导致 <Router /> 中的所有内容重新渲染。

不是<Router />，而是<Route />，仅当指定路径与当前路径匹配时。

<Router /> 的子级只会被渲染一次。

【讨论】：