React-Router URL 导致链接单击时组件重新安装（使用 useEffect(..)，[] 重新初始化）答案

【问题标题】：React-Router URL Causes Component Re-Mount (Re-Initialization with useEffect(..), []) on Link ClickReact-Router URL 导致链接单击时组件重新安装（使用 useEffect(..)，[] 重新初始化）
【发布时间】：2021-07-19 04:25:58
【问题描述】：

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

如果我有一个指向由react-router（或在我的情况下为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();
    }, []); 
  
}

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

【问题讨论】：

当您说“...每次单击主页链接”时包括在内，而您已经在主页路径上？它不应该重新渲染...如果来自另一个 Home 路径，显然 useEffect 运行。
发生这种情况，我从任何其他 URL 单击 / (Home)。
那从我对React的理解来看，完全正常。您来自任何其他路径，这意味着安装了另一个组件，然后您移动到 /（主页），您的 Home 组件在完成后开始渲染，它将调用 useEffect（此渲染仅一次）

标签： reactjs react-router react-router-dom react-router-bootstrap

【解决方案1】：

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

【讨论】：