React Router v4生命周期事件

将我的应用程序升级到React Router v4我很努力地找到一种干净的方式来实现旧的onUpdate逻辑，我之前在导航中使用了隐藏弹出式菜单。React Router v4生命周期事件

我可以在文档中看到的唯一方法是利用route render方法，但它似乎比以前更复杂 - 任何更简单的解决方案？

const HidePopupThenRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={matchProps => { 
    hidePopup(); 
    return <Component {...matchProps}/> 
    }}/> 
) 

<HidePopupThenRoute path="/" component={MyComponent}/>

来源

2017-02-08 Daaavvy

一个比较干净的解决方案was suggested on GitHub。最重要的是你从React's Context API中读取路由器的历史记录，在那里它被React路由器填充。你可以在你的组件定义contextTypes物业这样做：

static contextTypes = { 
    router: PropTypes.object 
};

这将确保路由器连接到该组件。然后，您可以使用接入路由器，然后从上下文它的历史，并补充说，大干快上的历史变化执行的回调：

this.context.router.history.listen(hidePopup)

你可能会想要做的是，在componentDidMount。

来源

2017-07-10 20:33:50 Vincent

我不会考虑太复杂，但我能理解它不看的权利，使渲染函数中调用势在必行。

另一种方法是创建一个组件，该组件监听位置更改并在发生时调用某些函数。

你可以看到source code为我写的这个实现。您可以使用它或使用类似的功能复制自己的组件。基本上，它所做的只是订阅history对象，并在位置更改时调用传递给它的任何功能。

const MyComponent =() => (
    <div> 
    <OnUpdate call={hideProps} /> 
    <h1>My Component</h1> 
    <p>...</p> 
    </div> 
)

来源

2017-02-08 18:01:18

React Router v4生命周期事件

回答

相关问题