时间戳

首页 > 解决方案 > 为什么 React onLeave={} 会为每个页面切换执行，而不是仅在分配的页面中执行？

reactjs - 为什么 React onLeave={} 会为每个页面切换执行，而不是仅在分配的页面中执行？

问题描述

我有这条路线，我想在用户离开时执行一些东西。

所以我找到了 onLeave 钩子

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

每当我在 /layout 时，它应该控制台记录“左侧布局”，并决定加载另一条路线。关键是，这似乎没有发生，因为每次切换任何路线时都会加载 console.log。

我的 app.js 文件中有路线，我

export default withRouter(App);

我已经像这样将它封装在索引中

ReactDOM.render(<BrowserRouter><Provider store={store}><App /></Provider></BrowserRouter>, document.getElementById('root'));

标签： reactjsreact-routerreact-router-dom

解决方案

onLeave 需要是一个函数。目前它只是一个普通的道具

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

但是请注意 onLeave 在 react-router v4 以后不再可用，您需要使用componentWillUnmountoruseEffect钩子来触发相同的行为

推荐阅读