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，则在该路径匹配时会重新渲染。没有路径的路线会始终进行匹配并被渲染，因此该路线在安装时会渲染，并且不会重新渲染，因为它没有道具，也没有任何可更新的状态（< em>如果包含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 />的子代只会被渲染一次。

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

2 个答案: