React Router v6中useNavigate包装函数的实现方法

你可以编写一个自定义的useHistory Hook，内部封装React Router v6的useNavigate和useLocation，完全模拟v5中useHistory的常用API，这样原有组件无需修改代码，只需替换导入路径即可。

基础版（覆盖核心导航方法） #

这个版本适配大多数场景，包含push、replace、goBack、goForward、go这些高频使用的方法：

import { useNavigate, useLocation } from 'react-router-dom';

export function useHistory() {
  const navigate = useNavigate();
  const location = useLocation();

  return {
    // 模拟history.push
    push: (path, state) => navigate(path, { state, replace: false }),
    // 模拟history.replace
    replace: (path, state) => navigate(path, { state, replace: true }),
    // 模拟history.goBack
    goBack: () => navigate(-1),
    // 模拟history.goForward
    goForward: () => navigate(1),
    // 模拟history.go(n)
    go: (n) => navigate(n),
    // 同步location对象
    location
  };
}

进阶版（支持监听location变化） #

如果你的组件中用到了history.listen方法，可以在自定义Hook中补充监听逻辑：

import { useNavigate, useLocation, useEffect, useRef } from 'react-router-dom';

export function useHistory() {
  const navigate = useNavigate();
  const location = useLocation();
  const listeners = useRef([]);

  // 当location变化时触发所有监听回调
  useEffect(() => {
    listeners.current.forEach(callback => callback(location));
  }, [location]);

  // 模拟history.listen
  const listen = (callback) => {
    listeners.current.push(callback);
    // 返回取消监听的清理函数
    return () => {
      listeners.current = listeners.current.filter(listener => listener !== callback);
    };
  };

  return {
    push: (path, state) => navigate(path, { state, replace: false }),
    replace: (path, state) => navigate(path, { state, replace: true }),
    goBack: () => navigate(-1),
    goForward: () => navigate(1),
    go: (n) => navigate(n),
    location,
    listen
  };
}

使用方式 #

将原有组件中：

import { useHistory } from 'react-router-dom';

替换为：

import { useHistory } from './path-to-your-custom-hook';

原有组件中对useHistory的调用逻辑无需任何修改，比如：

const history = useHistory();
history.push('/dashboard', { from: 'home' });
history.goBack();

内容的提问来源于stack exchange，提问作者Negin