[React] React Router: setRouteWillLeaveHook
React Router
2023-09-14 08:59:20 时间
setRouteWillLeaveHook provides a method for us to intercept a route change before leaving the current route.
Route Hook with Context to works with, So if we want to handle the route hook for Home Componet, we nee to add Context for Home Component:
class Home extends React.Component{ componentWillMount(){ this.context.router.setRouteLeaveHook( this.props.route, this.routeWillLeave ) } routeWillLeave(nextLocation){ console.log(nextLocation); return `Leave for next Location ${nextLocation.pathname}`; } render(){ return <div><h1>Home</h1><Links></Links></div> } } Home.contextTypes = { router: React.PropTypes.object.isRequired };
routeWillLeave is custom function, you can call it whatever you want, inside function, you can do the stuff you want, if you return a string, the string will show in alert dialog.
相关文章
- React v18.x 在 react-router v6 使用 lazy 动态加载组件实现
- 腾讯前端二面react面试题合集
- 问:React的useState和setState到底是同步还是异步呢?
- react源码中的hooks
- 问:你是如何进行react状态管理方案选择的?
- Airbnb 的 React Native 历程(四):React Native 落下帷幕
- 升级到React-Router-v6
- React 18 最新进展:发布 Beta 版本,公开测试新特性
- 腾讯前端二面常考react面试题总结
- react的jsx和React.createElement是什么关系?面试常问_2023-02-27
- react源码分析:深度理解React.Context_2023-02-28
- 升级到React-Router-v6_2023-02-28
- React 基础
- React-hooks源码
- 手写react-router
- 从react源码角度看React-Hydrate原理
- React源码分析--state计算流程和优先级
- 面试官:说说你对react生命周期的理解
- 前端高频react面试题整理5
- React常见面试题
- 从React源码来学hooks是不是更香呢_2023-02-07
- 4k字介绍 React Router 6.4 超大变化:引入 Data API。你不纯粹了!