Heim > Fragen und Antworten > Hauptteil
P粉4329068802023-07-28 12:05:00
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> ); }