javascript - React Router 通过自点击链接重新渲染组件

Question

我使用react-router-dom v6

代码

<NavLink to="/pathOne" className="ripple">label1</NavLink>
<NavLink to="/pathTwo" className="ripple">label2</NavLink>

问题

当您单击一个链接或另一个链接时，Route 组件将按其应有的方式呈现。但是，如果 "/pathOne" 处于事件状态并且我再次单击它怎么办？什么也没发生。

有没有办法通过单击事件链接来强制重新渲染路由元素？

如果我设置了 reloadDocument 属性，我可以刷新所有页面，但这不是一个选项。

Answer 1

如果您真正想要的只是让路由组件在每次单击其路由的链接时重新呈现，那么只需让这些组件调用 useLocation Hook 即可。每次单击链接时，都会创建一个新的 location 对象引用。新的 location 对象引用足以触发使用它的组件重新渲染。

示例:

const PathOne = () => {
  useLocation();

  useEffect(() => {
    console.log("PathOne rerender");
  });

  return <h1>PathOne</h1>;
};

const PathTwo = () => {
  useEffect(() => {
    console.log("PathTwo rerender");
  });

  return <h1>PathTwo</h1>;
};

function App() {
  return (
    <div className="App">
      <NavLink to="/pathOne" className="ripple">
        label1
      </NavLink>
      <NavLink to="/pathTwo" className="ripple">
        label2
      </NavLink>
      <Routes>
        <Route path="/pathOne" element={<PathOne />} />
        <Route path="/pathTwo" element={<PathTwo />} />
      </Routes>
    </div>
  );
}