React实现类似Vue的路由监听Hook

React实现类似Vue的路由监听Hook

  • 监听路由变化;
  • React Hook封装,返回回调函数,新旧路由为函数参数;

代码

javascript 复制代码
import { useEffect, useRef } from 'react';
import { useHistory, useLocation } from 'react-router-dom';

/**
 * 监听路由变化
 * @param callback
 */
const useRouteChange = (callback: (prevLocation: string, newLocation: string) => void) => {
  const location = useLocation();
  const history = useHistory();
  const prevLocation = useRef(location.pathname);

  useEffect(() => {
    const unListen = history.listen(newLocation => {
      callback(prevLocation.current, newLocation.pathname);
      prevLocation.current = newLocation.pathname;
    });

    return () => {
      unListen();
    };
  }, [history, callback]);
};

export default useRouteChange;

使用

javascript 复制代码
  const routeChange = useCallback((prevLocation, newLocation) => {
    console.log(`RouteChange:From ${prevLocation} To ${newLocation}`);
  }, []);

  useRouteChange(routeChange);
相关推荐
uhakadotcom1 小时前
入门教程:如何编写一个chrome浏览器插件(以jobleap.cn收藏夹为例)
前端·javascript·面试
给月亮点灯|1 小时前
Vue3基础知识-Hook实现逻辑复用、代码解耦
前端·javascript·vue.js
Simon_He1 小时前
一款适用于 Vue 的高性能流式 Markdown 渲染器,源自我们的 AI 聊天机器人
前端·vue.js·markdown
顽强d石头1 小时前
v-model与.aync的区别
前端·javascript·vue.js
xvmingjiang2 小时前
Vue 3 中监听多个数据变化的几种方法
前端·javascript·vue.js
我有一只臭臭2 小时前
ES5 和 ES6 类的实现
前端·javascript·es6
2301_821046522 小时前
Python的深度学习
开发语言·javascript·ecmascript
小高0072 小时前
🤔函数柯里化:化繁为简的艺术与实践
前端·javascript·面试
却尘2 小时前
React useMemo 依赖陷阱:组件重挂载,状态无限复原
前端·javascript·react.js
Asort2 小时前
JavaScript 从零开始(三):浏览器控制台与VS Code协同工作环境搭建详解
前端·javascript