0

我的应用程序中有 2 个组件/页面：orderPage 和 customerPage，这是主要组件中的导航：

import { Switch, Route} from 'react-router-dom';
<Switch>
    <Route exact path='/order/:id' component={() => <OrderPage/>}/>
    <Route exact path='/customer/:id' component={CustomerPage}/>
</Switch>

订单页面有按钮/链接可打开 CustomerPage 以详细查看客户数据（客户是订单的属性）。CustomerPage 上有用于关闭 CustomerPage 并导航回 OrderPage 的按钮/链接：

import {Link} from 'react-router-dom'
<button type="button">
    <Link to={'/order/'+this.props.orderId}>Close</Link>
</button>

问题是，这样的导航会卸载并破坏订单组件。我可以通过输出 formCreateTimestamp 通过 OrderPage 中的构造函数代码检查此行为：

constructor(props) {
        super(props);
        this.state = {
          ...
          formCreatedTimestamp: new Date(),
        };
        ...
    }

我可以控制这种行为并防止这种卸载和销毁吗？我在哪里可以进行这种控制？也许在负责导航的代码/标记中？如何？或者我可以在 OrderPage 中实现更复杂的逻辑来防止卸载？

确实，有ComponentWillUnmountlifecylce API https://reactjs.org/docs/react-component.html#componentwillunmount但文档没有提到此 API 的实现可用于防止卸载（例如通过在函数内抛出一些异常） .

订单有客户，从订单导航以查看客户详细信息然后导航回来是很常见的用例，当然，在这种情况下，不应从 DOM 树中修改/删除 OrderPage，但仍然会发生这种情况。可以建议使用模态对话框来呈现客户数据，但模态对话框对于针对移动使用的 Web 应用程序来说是一个不好的建议。

如何防止 React 组件中的卸载？为解决方案提供了 unregiterLeaveHooks 和其他解决方案，但它们更多的是关于防止导航（例如从 OrderPage 到 CustomerPage），而不是关于在导航到 CustomerPage 时保持 OrderPage 处于未安装状态。该问题还提到防止卸载应该在flux/store中而不是在中进行componentWillUnmount，但是该问题没有进一步详细说明。实际上，我确实在使用通量/状态，我很乐意在业务级别（Redux 商店）而不是在某些特定的组件功能中实现卸载控制逻辑。

防止使用 React-router 卸载组件已经详细说明了我的情况，它的答案说这种 React-Router 行为（自动创建和卸载组件）是设计使然，唯一的解决方案是使用始终存在的组件（放置外部 Switch 语句）由相关 CSS 设置为可见/不可见。所以，可能我的问题是重复的。

4

0 回答 0