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

Question

据我了解，单击 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

我错过了什么？

Answer 1

如果您实际上在具有路径的路线上渲染

Foo

，那么当该路径匹配时它会重新渲染。没有路径的路线将 always 匹配并渲染，因此它在安装时渲染并且不会重新渲染，因为它没有 props 也没有任何要更新的状态（如果组件包含

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

Answer 2

据我了解，单击 React Router 的

<Link />

组件应该会导致

<Router />

内的所有内容重新渲染。

不是

<Router />

，而是

<Route />

，仅当指定路径与当前路径匹配时。

<Router />

的子项只会渲染一次。

Answer 3

您可以通过

<link/>

标签更改

<a/>

，示例

<a href="/bar">Bar</a>