在同一组件上具有不同路径的 React Router：不重新初始化组件（未调用 useEffect []）答案

【问题标题】：React Router with different paths on same component: does not re-initialize component (useEffect [] not called)在同一组件上具有不同路径的 React Router：不重新初始化组件（未调用 useEffect []）
【发布时间】：2021-06-01 18:06:49
【问题描述】：

我有一个使用相同组件在不同路径上定义的路由器，其差异通过 mode 属性指示。

<Route path="/viewAgreementForm">
    <AgreementForm mode="view" />
</Route>          
<Route path="/editAgreementForm">
    <AgreementForm mode="edit" />
</Route>

AgreementForm 在其useEffect(.., []) 中进行了一些初始化。

通常路由工作，但如果我从查看模式直接进入编辑模式，编辑模式组件的重新初始化不起作用。因此，在将我从 View->Edit 带入的按钮链接期间，此部分不会执行，尽管如果我从另一个屏幕独立打开这些路由，它确实有效：

useEffect(() => {
    if (props.mode === 'view') {
        alert('Initializing in View Mode')
    } else {
        alert('NOT initializing in View Mode');
    }
}, []);

顺序：

打开查看模式；正确获取视图初始化
在“查看”模式下单击应该带我进入“编辑”的按钮。
我确实得到了正确更改和重新渲染的组件的编辑模式版本，但我没有得到useEffect(.., [])的初始化，并且没有警报。

我的理解是：Router 会销毁/重新创建任何路由上的组件，所以我处理的是全新的组件，不是吗？

【问题讨论】：

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

【解决方案1】：

您需要告诉 useEffect 要跟踪哪些变量，改为

useEffect(() => {
    if (props.mode === 'view') {
        alert('Initializing in View Mode')
    } else {
        alert('NOT initializing in View Mode');
    }
}, [props.mode]);

（OP 根据响应者后来的评论添加的注释：当 React 在新路由上看到相同的组件时，它会表现得好像只是道具发生了变化，但不会 strong> 创建一个可以通过useEffect(.., [])（初始化）的全新组件。

【讨论】：

但是我不是在路由器交换机上重新安装一个新组件吗？它不是被更新的同一个组件。我的印象是所有组件都会在路由器更改时被破坏并重新创建。
当导航时 react 会知道你正在从 AgreementForm 到 AgreementForm（相同的组件）所以它就像只是改变了道具一样
谢谢。为了清楚起见，我在您的回答中添加了这一点。