为什么React onLeave={}对每个页面开关都执行,而只在指定的页面开关中执行



我有一个路由,我想在用户离开它时执行一些东西。

所以我找到了onLeave挂钩

<Switch>
<Route exact path="/layout" onLeave={ console.log("LEFT LAYOUT") } render={(props) => <GridLayoutApps retracted={this.state.sideBarRetracted} {...props}/>} />
</Switch>

它应该是console.log";左侧布局";每当我在/布局时,并决定加载另一条路线。重点是,这似乎不会发生,因为每次我切换ANY路由时都会加载console.log。

我在我的app.js文件中有路由,我

export default withRouter(App);

我把它像这样封装在索引中

ReactDOM.render(<BrowserRouter><Provider store={store}><App /></Provider></BrowserRouter>, document.getElementById('root'));
onLeave需要是一个函数。目前它只是一个普通的道具
<Switch>
<Route exact path="/layout" onLeave={() => {console.log("LEFT LAYOUT")} } render={(props) => <GridLayoutApps retracted={this.state.sideBarRetracted} {...props}/>} />
</Switch>

但是请注意,onLeave在react路由器v4以后不再可用,您需要使用componentWillUnmountuseEffect挂钩来触发相同的行为

最新更新