如何控制 react-router-dom 链接导航：它必须重新加载组件还是必须带回现有组件？

问题描述

我的应用程序中有 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 中实现更复杂的逻辑来防止卸载？

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

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

How can I prevent the unmount in React Components? 为解决方案提供了 unregiterLeaveHooks 和其他解决方案，但它们更多地是为了防止导航（例如从 OrderPage 到 CustomerPage），而不是在导航到 CustomerPage 时保持 OrderPage 处于 unmounted 状态。该问题还提到防止卸载应在通量/存储中完成，而不是在 componentwillUnmount 中完成，但该问题没有进一步详细说明。实际上，我确实在使用通量/状态，我很乐意在业务级别（Redux 存储）而不是在某些特定组件功能中实现卸载控制逻辑。

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）