React Router v5 - Как заставить маршрут всегда перерисовываться при изменении местоположения?

Question

Рассмотрим этот пример codeandbox .

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>
      <Route>
        <Foo />
      </Route>
      <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>
  );
}

В настоящее время при нажатии на <Link /> для изменения местоположения компонент <Foo /> никогда не визуализируется повторно. Как мы можем принудительно выполнить повторную визуализацию при изменении местоположения?

Answer 1

Использование хука useLocation, который предоставляет React Router, работает.

https://reactrouter.com/native/api/Hooks/uselocation

import { BrowserRouter as Router, Route, Link, useLocation } from "react-router-dom";

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