如何获取React Router DOM V6的完整路由历史记录？

假设你使用的是React Router v6+（从navigate方法判断），以下是两种可行的实现方式：

1. 自定义Hook追踪路由历史 #

React Router默认不会对外暴露完整的历史路径数组，最简单的方式是手动监听路由变化并记录：

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

export function useRouteHistory() {
  const location = useLocation();
  const [history, setHistory] = useState([]);

  useEffect(() => {
    // 每次路由变化时，将当前页面路径加入历史数组（去掉前缀/，仅保留页面名称）
    setHistory(prev => [...prev, location.pathname.slice(1)]);
  }, [location]);

  return history;
}

在需要获取历史的组件中调用这个Hook，就能得到["home","settings","home","details"]格式的数组。

2. 自定义历史对象（慎用） #

如果你的项目是通过createBrowserHistory手动创建历史对象（而非使用createBrowserRouter），可以直接访问其内部的entries属性：

import { createBrowserHistory } from 'history';

const customHistory = createBrowserHistory();
// 提取路径名称并整理成目标格式
const routeHistory = customHistory.entries.map(item => item.pathname.replace('/', ''));

⚠️ 注意：entries属于history库的内部属性，官方未承诺其稳定性，版本更新可能会导致该属性变化，建议优先使用第一种方式。

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