React Router v5 - Щелчок не перерисовывается

Question

Насколько я понимаю, нажатие на компонент <Link /> в React Router должно привести к повторному рендерингу всего внутри <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 на маршруте с путем, он выполняет повторную визуализацию при совпадении этого пути. Маршрут без пути будет всегда совпадать и визуализироваться, поэтому он отображается при монтировании и не перерисовывается, поскольку у него нет реквизитов или состояния для обновления ( это было бы, если бы компонент, содержащий 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к8р c

Answer 2

Насколько я понимаю, нажатие на компонент <Link /> в React Router должно привести к повторному рендерингу всего внутри <Router />.

не <Router />, а <Route />, только если указанный путь соответствует текущему пути.

дочерние элементы <Router /> будут отображаться только один раз.