如何解决如何控制 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 举报,一经查实,本站将立刻删除。