当我在不同的路由之间切换时,React Router会重新渲染记忆化的路由,导致
以下是该问题的示例代码:
useEffect(() => [])
重新运行并重新获取数据。我希望防止这种情况发生,而是将现有的路由保留在DOM中但隐藏起来。然而,我正在为“如何”解决问题而苦苦挣扎。以下是该问题的示例代码:
import React, { useEffect } from "react";
import { BrowserRouter as Router, Route, Routes, useNavigate } from "react-router-dom";
export default function App() {
return (
<Router>
<Routes>
<Route path={"/"} element={<MemoizedRouteA />} />
<Route path={"/b"} element={<MemoizedRouteB />} />
</Routes>
</Router>
);
}
function RouteA() {
const navigate = useNavigate()
useEffect(() => {
alert("Render Router A");
}, []);
return (
<button onClick={() => { navigate('/b') }}>Go to B</button>
);
};
const MemoizedRouteA = React.memo(RouteA)
function RouteB() {
const navigate = useNavigate()
useEffect(() => {
alert("Render Router B");
}, []);
return (
<button onClick={() => { navigate('/') }}>Go to A</button>
);
}
const MemoizedRouteB = React.memo(RouteB)
沙盒:https://codesandbox.io/s/wonderful-hertz-w9qoip?file=/src/App.js
通过上面的代码,您会发现每当您点击按钮或使用浏览器后退按钮时,“alert”代码都会被调用。
由于React Router多年来发生了许多变化,我很难找到解决方案。