React-Router URL 在 Link Click 上导致组件重新安装（使用 useEffect(..)，[] 重新初始化）

Question

我运行这里也提到了一个问题，React-Router re-mounts component on route change，但没有任何解决方案。

如果我有一个 Link 指向由 react-router 管理的 URL（在我的例子中是 react-router-bootstrap），

export default function Navigation(props) {
    return (
        <div id="top-nav">
            <Nav as="nav" aria-label="main" className="container">
                <Nav.Item>
                    <LinkContainer to="/">
                        <Nav.Link><i className="fas fa-home" aria-label="Home"></i></Nav.Link>
                    </LinkContainer>
                </Nav.Item>
                <Nav.Item>
                    <LinkContainer to="/agreements">
                        <Nav.Link>Agreements</Nav.Link>
                    </LinkContainer>
                </Nav.Item>

我的 Home 组件位于具有开关的父 Main 组件中，

export default function Main(props) {
    return (
        
        <main className="container" id="main">
        
            <Switch>
                <Route exact path="/">
                    <Home />
                </Route>                
                <Route path="/agreements">
                    <Agreements />
                </Route>
                <Route path="/approvals">
                    <Approvals />
                </Route>

然后我的 Home 组件 (/) 有一个 init (mount) useEffect(..,[]) as

export default function Home(props) {
 
    // On initialization, fetch data
    useEffect(() => {    
        fetchPreliminaryData();
    }, []); 
  
}

然后每次单击主页 link，我将进入我的 Initializing/Mounting 提取。我在调试器中验证了这一点。我的目标是只在第一次加载组件时进行提取。这会影响我的应用程序的性能。有什么解决办法吗？

Answer 1

我会在全局状态中存储这样的东西，只有当它不存在时才获取它。但是，如果你没有为你的项目实现这样的行为，你可以将这些数据保存在父组件中，并将它作为 props 与 onChange 函数一起发送，这样在你第一次获取它时，你就将数据发送给父组件组件，它将把它作为 props 发回，并且在 useEffect 中，如果 props.preliminaryData 存在，你可以添加一个条件来获取数据。

React-Router URL 在 Link Click 上导致组件重新安装（使用 useEffect(..)，[] 重新初始化）

React-Router URL Causes Component Re-Mount (Re-Initialization with useEffect(..), []) on Link Click

reactjs

react-router

react-router-dom

react-router-bootstrap