我有一個帶有嵌套路由的應用程式，并希望使用 React Transition Group 在頂級路由和嵌套路由之間進行轉換。
我的挑戰是我有一個包含嵌套路由的背景關系提供程式。當頁面在嵌套路由之間轉換時，背景關系提供程式正在卸載，導致提供程式丟失狀態。如果沒有轉換，背景關系提供程式不會卸載，因此會保留狀態。
我在代碼沙箱中實作了一個簡化的示例：
問題
MyContextProvider即使后代路線發生變化，也會重新安裝。
這是由根CSSTransition組件使用與當前位置的鍵耦合的 React 鍵引起的。當后代路由更改時，鍵會更改，而當 React 鍵更改時，則重新安裝整個子 ReactTree。
function App() {
const location = useLocation();
return (
<SwitchTransition>
<CSSTransition
key={location.key} // <-- React key change remounts subtree
classNames="right-to-left"
timeout={200}
>
<Routes>
<Route path="/1/*" element={<Page1 />} />
<Route path="/2/*" element={<Page2 />} />
<Route path="*" element={<Navigate to="/1" />} />
</Routes>
</CSSTransition>
</SwitchTransition>
);
}
一個解決方案是提升MyContextProviderReactTree 中的較高層，以便即使在路由發生變化時它也保持掛載。用包裹SwitchTransition組件并從組件MyContextProvider中移除。MyContextProviderPage1
function App() {
const location = useLocation();
return (
<MyContextProvider>
<SwitchTransition>
<CSSTransition
key={location.key}
classNames="right-to-left"
timeout={200}
>
<Routes>
<Route path="/1/*" element={<Page1 />} />
<Route path="/2/*" element={<Page2 />} />
<Route path="*" element={<Navigate to="/1" />} />
</Routes>
</CSSTransition>
</SwitchTransition>
</MyContextProvider>
);
}
第1頁
const Page1 = () => {
const location = useLocation();
return (
<>
<h1>Page1</h1>
<NavLink to="/2">Go to Page2</NavLink>
<Routes location={location}>
<Route path="/1" element={<SubPage1 />} />
<Route path="/2" element={<SubPage2 />} />
<Route path="*" element={<Navigate to="1" />} />
</Routes>
</>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/527802.html