英文:
How to prevent components from unmounting when path changes?
问题
有没有办法阻止路由卸载？在我的应用程序中，我需要在切换路由时保留React状态。
在这里，您可以看到，如果我们更改路由，然后主页对应的 route 组件将会 mount 和 unmount。我不想要这个。
我已经查看过
但对我不起作用。
index.js
import React from "react";import { createRoot } from "react-dom/client";import { BrowserRouter, Routes, Route } from "react-router-dom";import App from "./App";import First from "./routes/First";import Second from "./routes/Second";const rootElement = document.getElementById("root");const root = createRoot(rootElement);root.render(<BrowserRouter><Routes><Route path="" element={<App />} /><Route path="first" element={<First />} /><Route path="second" element={<Second />} /></Routes></BrowserRouter>);
App.js
import * as React from "react";import { Link } from "react-router-dom";export default function App() {return (<div><h1>Prevent Routing</h1><navstyle={{borderBottom: "solid 1px",paddingBottom: "1rem"}}><Link to="/first">First</Link> |<Link to="/second">Second</Link></nav></div>);}
First.js
import * as React from "react";import { useEffect } from "react";import { Link } from "react-router-dom";export default function First() {useEffect(() => {console.log("mounted First");return () => console.log("unmounted First");}, []);return (<main style={{ padding: "1rem 0" }}><Link to="/">Home</Link><h2>First</h2></main>);}
Second.js
import * as React from "react";import { useEffect } from "react";import { Link } from "react-router-dom";export default function Second() {useEffect(() => {console.log("mounted Second");return () => console.log("unmounted Second");}, []);return (<main style={{ padding: "1rem 0" }}><Link to="/">Home</Link><h2>Second</h2></main>);}
英文:
Is there a way to stop the route from unmounting? In my app I would need to keep react state between switching the routes.
Here you can see that, if we change route then home respective route component will mount and unmount. I don't want.
I've looked in
How can I prevent the unmount in React Components?
How can I prevent React from unmounting/remounting a component?
but doesn't work for me.
index.js
import React from "react";import { createRoot } from "react-dom/client";import { BrowserRouter, Routes, Route } from "react-router-dom";import App from "./App";import First from "./routes/First";import Second from "./routes/Second";const rootElement = document.getElementById("root");const root = createRoot(rootElement);root.render(<BrowserRouter><Routes><Route path="" element={<App />} /><Route path="first" element={<First />} /><Route path="second" element={<Second />} /></Routes></BrowserRouter>);
App.js
import * as React from "react";import { Link } from "react-router-dom";export default function App() {return (<div><h1>Prevent Routing</h1><navstyle={{borderBottom: "solid 1px",paddingBottom: "1rem"}}><Link to="/first">First</Link> |<Link to="/second">Second</Link></nav></div>);}
First.js
import * as React from "react";import { useEffect } from "react";import { Link } from "react-router-dom";export default function First() {useEffect(() => {console.log("mounted First");return () => console.log("unmounted First");}, []);return (<main style={{ padding: "1rem 0" }}><Link to="/">Home</Link><h2>First</h2></main>);}
Second.js
import * as React from "react";import { useEffect } from "react";import { Link } from "react-router-dom";export default function Second() {useEffect(() => {console.log("mounted Second");return () => console.log("unmounted Second");}, []);return (<main style={{ padding: "1rem 0" }}><Link to="/">Home</Link><h2>Second</h2></main>);}
答案1
得分: 1
React Router在组件不匹配path时总是会卸载该组件。
你可以通过将两个组件与双重路由组合来解决这个问题，每个组件可以根据当前的path确定要渲染什么。
因此，主要路由看起来会像这样：
<Route path={[ '/first', '/second' ]}><First {...{}} /><Second {...{}} /></Route>
然后在组件中使用useLocation来切换渲染：
import { useLocation } from "react-router-dom";function First(props) {const location = useLocation();if (location.pathname !== '/first') {return null}}
英文:
React Router will always unmount the component when it's not matched by a path.
You could fix this by combining both Components with a double route, each component can determine what he will render based on the current path.
So the main routing will look something like:
<Route path={[ '/first', '/second' ]}><First {...{}} /><Second {...{}} /></Route>
Then use useLocation in the component to toggle the render:
import { useLocation } from "react-router-dom";function First(props) {const location = useLocation();if (location.pathname !== '/first') {return null}}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论