如何在react-router-v6中获取上一页URL？

React Router v6没有提供直接获取上一页URL的内置API，但可以通过以下两种常用方式实现需求：

方法一：自定义Hook监听路由变化 #

利用useLocation结合useRef记录上一次的路由地址，适合全局追踪浏览历史的场景：

步骤1：创建自定义Hook #

import { useLocation, useEffect, useRef } from 'react';

function usePreviousLocation() {
  const location = useLocation();
  const prevLocationRef = useRef();

  useEffect(() => {
    // 每次路由变化时，保存当前地址为上一页地址
    prevLocationRef.current = location;
  }, [location]);

  // 返回上一页的路径名，首次进入应用时为undefined
  return prevLocationRef.current?.pathname;
}

步骤2：在组件中使用 #

import { usePreviousLocation } from './hooks';

const MyComponent = ({ x }) => {
  const prevUrl = usePreviousLocation();

  // 基于上一页URL的条件逻辑
  const result = prevUrl === '/someUrl' ? x + 2 : x - 2;

  // 打印上一页URL
  console.log('上一页URL:', prevUrl);

  return <div>计算结果：{result}</div>;
};

方法二：跳转时通过state传递来源地址 #

如果是从特定页面跳转过来，可以在跳转时主动传递上一页地址，适合明确跳转来源的场景：

步骤1：跳转页面传递状态 #

在发起跳转的页面（如PageA）中，将当前路径作为state参数传递：

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

const PageA = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const goToTargetPage = () => {
    // 传递当前页面路径作为来源地址
    navigate('/target-page', { state: { from: location.pathname } });
  };

  return <button onClick={goToTargetPage}>跳转到目标页面</button>;
};

步骤2：目标页面获取来源地址 #

在目标页面中，通过useLocation获取传递的state：

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

const TargetPage = ({ x }) => {
  const location = useLocation();
  // 取出上一页地址，添加兜底值避免undefined
  const prevUrl = location.state?.from ?? '无来源地址';

  const result = prevUrl === '/pageA' ? x + 2 : x - 2;

  console.log('上一页URL:', prevUrl);

  return <div>计算结果：{result}</div>;
};

注意事项 #

• 方法一的自定义Hook会记录每次路由变化的上一页地址，但首次进入应用时prevUrl为undefined，需做兜底处理。
• 方法二的state仅在通过navigate跳转时有效，若用户直接输入URL进入页面，state会不存在，因此要添加默认值。

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