React路由器v4生命周期事件
升级我的应用程序到React Router v4，我正在努力寻找一种干净的方式来实现旧的onUpdate逻辑，我以前在导航上使用了隐藏弹出菜单。
我在文档中看到的唯一方法是利用route render方法，但它似乎比以前复杂得多--有没有更简单的解决方案？
const HidePopupThenRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={matchProps => {
hidePopup();
return <Component {...matchProps}/>
}}/>
)
<HidePopupThenRoute path="/" component={MyComponent}/>回答 2
Stack Overflow用户
发布于 2017-07-11 04:33:50
一个相对干净的解决方案was suggested on GitHub。归根结底，您可以从React's Context API读取路由器的历史记录，它由React Router填充。您可以通过在组件中定义contextTypes属性来执行此操作：
static contextTypes = {
router: PropTypes.object
};这将确保路由器连接到该组件。然后，您可以使用从上下文访问路由器及其历史记录，并添加在历史记录更改时执行的回调：
this.context.router.history.listen(hidePopup)您可能希望在componentDidMount中执行此操作。
Stack Overflow用户
发布于 2017-02-09 02:01:18
我不会认为这太复杂，但我可以理解在渲染函数中进行命令式调用是不正确的。
一种替代方法是创建一个OnUpdate组件，该组件侦听位置更改并在发生更改时调用某些函数。
你可以看到我写的这个实现的source code。您可以使用它，也可以复制您自己的具有类似功能的组件。基本上，它所做的就是订阅history对象，并在位置更改时调用您传递给它的任何函数。
const MyComponent = () => (
<div>
<OnUpdate call={hideProps} />
<h1>My Component</h1>
<p>...</p>
</div>
)https://stackoverflow.com/questions/42117645
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号