自分でリンクをクリックして、React Router コンポーネントを再レンダリングします。

Question

<p>私は <code>react-router-dom</code> v6</p>を使用します。 <h1>コード</h1> <pre class="brush:php;toolbar:false;"><NavLink to="/pathOne" className="ripple">label1</NavLink> <NavLink to="/pathTwo" className="ripple">label2</NavLink></pre> <h1>質問</h1> <p>いずれかのリンクをクリックすると、Route コンポーネントが期待どおりにレンダリングされます。ただし、「/pathOne」がアクティブな状態で再度クリックしても、何も起こりません。 </p><p>アクティブなリンクをクリックしてルート要素を強制的に再レン​​ダリングする方法はありますか? </p><p>reloadDocument 属性が設定されていればページ全体を更新できますが、それは実行可能なオプションではありません。 </p>gt;

<コード>

Answer 1

If all you really want is for the route component to rerender each time the link to its route is clicked then just have those components call the useLocation hook. Each time the link is clicked a new location object reference is created. The new location object reference is enough to trigger the component using it to be rerendered.

Example:

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