如何通过react-router获取来源URL？react-redux跳转来源查询

刚好在React Router项目里处理过类似的需求，给你分享几种靠谱的方案，结合你用React-Redux的场景也能轻松适配：

方案一：跳转时主动传递来源信息（最可控） #

这是我最推荐的方式，因为能完全掌控传递的内容，不会依赖浏览器的不确定性。

步骤1：在来源页跳转时携带state #

在所有需要跳转到目标页的组件里，用useNavigate跳转时把当前页面的路径作为state传递：

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

const SourcePage = () => {
  const navigate = useNavigate();

  const handleJump = () => {
    // 把当前页面的pathname作为来源存入state
    navigate('/your-target-page', { state: { from: window.location.pathname } });
  };

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

步骤2：在目标页接收并可选存入Redux #

目标页用useLocation获取传递的state，如果需要全局共享，可以存入Redux store：

import { useLocation } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { useEffect } from 'react';
// 假设你有对应的action creator
import { setSourceUrl } from '../redux/slice';

const TargetPage = () => {
  const location = useLocation();
  const dispatch = useDispatch();
  // 取出来源URL，处理空值情况
  const sourceUrl = location.state?.from || '未知来源';

  // 存入Redux，方便其他组件使用
  useEffect(() => {
    dispatch(setSourceUrl(sourceUrl));
  }, [sourceUrl, dispatch]);

  return <div>你从 {sourceUrl} 跳转过来</div>;
};

方案二：利用浏览器API推断来源（无需手动传递） #

如果不想每个跳转都手动写state，可以用浏览器自带的document.referrer或者历史记录来推断，但要注意这种方式有局限性（比如跨域跳转、直接输入URL时会为空）。

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

const TargetPage = () => {
  const location = useLocation();
  const navigationType = useNavigationType(); // 获取跳转类型：PUSH/POP/REPLACE
  const [sourceUrl, setSourceUrl] = useState(null);

  useEffect(() => {
    // 只有当用户是通过跳转（PUSH）或后退（POP）进入时，才尝试获取来源
    if (navigationType !== 'REPLACE') {
      // 优先取history里的state（如果之前有设置过），其次用document.referrer
      const previousUrl = window.history.state?.from || document.referrer;
      setSourceUrl(previousUrl || '直接访问');
    }
  }, [location, navigationType]);

  return <div>来源页面：{sourceUrl}</div>;
};

方案三：全局统一处理（适合多页面需要追踪的场景） #

如果你的项目很多页面都需要记录来源，可以自定义一个全局的跳转钩子，统一处理来源记录并同步到Redux：

// 自定义钩子：src/hooks/useCustomNavigate.js
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { setLastVisitedPage } from '../redux/slice';

export const useCustomNavigate = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const customNavigate = (to, options = {}) => {
    // 记录当前页面为上一页，存入Redux
    const currentPath = window.location.pathname;
    dispatch(setLastVisitedPage(currentPath));
    // 同时把来源信息传入state，方便目标页直接获取
    navigate(to, { ...options, state: { ...options.state, from: currentPath } });
  };

  return customNavigate;
};

之后所有页面都用这个自定义钩子跳转，目标页既可以从location.state取来源，也可以直接从Redux store里获取lastVisitedPage。

注意事项 #

• 如果需要页面刷新后还能保留来源信息，可以把来源URL存入localStorage，或者用redux-persist持久化Redux store。
• 无论哪种方案，都要处理用户直接输入URL访问的情况，此时没有上一页信息，记得给个默认值比如“直接访问”。

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