Question

我有这条路线，希望在用户离开时执行一些操作。

所以我找到了onLeave钩子

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

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

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

export default withRouter(App);

我已经将它封装在索引中

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

Answer 1

onLeave必须是一个函数。目前，它只是一个正常的道具

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

但是请注意，onLeave在React-router v4及更高版本中不再可用，您需要使用componentWillUnmount或useEffect钩子来触发相同的行为

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

1 个答案: