Reactjs React Router v5-如何在位置更改时强制路由始终重新渲染？

考虑这个例子

从“React”导入React；
导入“/styles.css”；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
常量Foo=（）=>{
控制台日志（“呈现”）；
返回null；
};
导出默认函数App（）{
返回(
家


福
家

福

);
}

---

当前，当单击

更改位置时，

组件不会重新呈现。当位置更改时，我们如何强制重新渲染？

使用React Router提供的

useLocation

挂钩

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

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

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