Restituez le composant React Router en cliquant vous-même sur le lien.

Question

J'utilisereact-router-dom

code

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

Question

Lorsque vous cliquez sur un lien ou un autre, le composant Route s'affiche comme prévu. Cependant, si "/pathOne" est actif et que je clique à nouveau dessus, rien ne se passe.

Existe-t-il un moyen de forcer le rendu d'un élément de route en cliquant sur un lien actif ?

Je pourrais actualiser la page entière si l'attribut reloadDocument était défini, mais ce n'est pas une option viable.

Answer 1

Si tout ce que vous voulez vraiment, c'est que le composant d'itinéraire soit restitué à chaque fois que vous cliquez sur le lien vers son itinéraire, il suffit alors que ces composants appellent la useLocation hook. Each time the link is clicked a new location object reference is created. The new location référence d'objet pour déclencher le rendu du composant qui l'utilise.

Exemple :

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