react-router 可以在 react中起到路由的作用,同时也有一个routerWillLeave,这个函数帮助我们再处理路由的时候,离开某个路由要做的某个判断起到了很好的作用,但是version 2 才有这个功能,这里记录下如何自定自己弹出框。
由于react-router自带的功能不是很好,需要我们自己处理一下,于是google参考了stackoverflow上的一篇文章,先建立一个函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| function setAsyncRouteLeaveHook(router, route, hook) { let withinHook = false let finalResult = undefined let finalResultSet = false router.setRouteLeaveHook(route, nextLocation => { withinHook = true if (!finalResultSet) { hook(nextLocation).then(result => { finalResult = result finalResultSet = true if (!withinHook && nextLocation) { router.replace(nextLocation) } }) } let result = finalResultSet ? finalResult : false withinHook = false finalResult = undefined finalResultSet = false return result }) }
|
原来的push,我这里改成了replace,为了适合我自己的逻辑。
然后添加一下routerWillLeave的逻辑
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| routerWillLeave(nextLocation) { return new Promise((resolve, reject) => { Popbox.pop({ text: '你离使用红包只差一步之遥,确定放弃吗?', confirmBtnText: '继续绑卡', cancelBtnText: '放弃', cancelFunc: () => { resolve(true); }, }); })
return false; }
|
这里是需要返回一个Promise的,所以自己的代码记得处理一下。
最后我们跟根据自己的逻辑来设置一下这个Hook。
我这里是放在了componentDidMount中做的处理
1 2 3 4 5 6 7
| componentDidMount() { const { type } = this.props.params; if(type){ setAsyncRouteLeaveHook(this.context.router, this.props.route, this.routerWillLeave); } }
|
好了,希望能帮到不了解英文的你,或者是找不到资料的你。