react-router-dom路径追踪问题：previousPath与当前路径一致的排查问询

我在用react-router-dom实现路径追踪时遇到问题：previousPath始终和当前location路径一致，无法正确记录上一页路径。尝试新增currentPath状态也没解决。仅需动态显示上一页名称，无需跳转功能。

现有代码 #

BreadCrumbs组件 #

import React, { useContext, useEffect } from 'react';
import { useMatches, useLocation } from 'react-router-dom';
import './breadcrumbs.css';
import { NavigationContext } from '../../utils/NavigationProvider';

const BreadCrumbs = () => {
  const { previousPath, handleNavigation } = useContext(NavigationContext);
  const location = useLocation();
  let matches = useMatches();
  let crumbs = matches
    .filter((match) => Boolean(match.handle?.crumb))
    .map((match) => match.handle.crumb(match.data));

  useEffect(() => {
    if (location.pathname !== previousPath) {
      handleNavigation(location);
    }
  }, [location.pathname]);

  console.log(location.pathname);
  console.info(previousPath);

  const formatPreviousPath = (previousPath) => {
    const formattedPath = previousPath.replace(/-|\//g, ' ').toUpperCase();
    return formattedPath;
  }

  return (
    <div className='breadcrumbs'>
      <div className='breadcrumbs__container'>
        <span>{crumbs[0].props.children.toUpperCase()}</span>
        <div className='breadcrumbs__path'>
          <span>{formatPreviousPath(previousPath)}</span>
          <p>/</p>
          <span>{location.pathname.replace(/-|\//g, ' ').toUpperCase()}</span>
        </div>
      </div>
    </div>
  );
};

export default BreadCrumbs;

NavigationProvider代码 #

import React, { useState, createContext } from 'react';

export const NavigationContext = createContext();

export const NavigationProvider = ({ children }) => {
  const [previousPath, setPreviousPath] = useState('/');

  const handleNavigation = (location) => {
    setPreviousPath(location.pathname);
  };

  return (
    <NavigationContext.Provider value={{ previousPath, handleNavigation }}>
      {children}
    </NavigationContext.Provider>
  );
};

问题根源 #

• 原Provider只维护了previousPath，每次调用handleNavigation时直接把当前路径赋值给它，导致两者同步更新，根本没记录上一页的路径
• 新增currentPath后没处理状态更新顺序，加上组件闭包问题，导致读取的状态不是最新值

修复方案 #

1. 修正NavigationProvider的状态管理 #

同时维护currentPath和previousPath，确保路径变化时先存旧路径，再更新当前路径：

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

export const NavigationContext = createContext();

export const NavigationProvider = ({ children }) => {
  const [currentPath, setCurrentPath] = useState('/');
  const [previousPath, setPreviousPath] = useState('/');
  const location = useLocation();

  useEffect(() => {
    // 路径变化时，先把旧的当前路径存为上一页路径，再更新当前路径
    if (location.pathname !== currentPath) {
      setPreviousPath(currentPath);
      setCurrentPath(location.pathname);
    }
  }, [location.pathname, currentPath]);

  return (
    <NavigationContext.Provider value={{ previousPath, currentPath }}>
      {children}
    </NavigationContext.Provider>
  );
};

2. 简化BreadCrumbs组件逻辑 #

直接从Context读取维护好的状态，移除手动调用的handleNavigation：

import React, { useContext } from 'react';
import { useMatches, useLocation } from 'react-router-dom';
import './breadcrumbs.css';
import { NavigationContext } from '../../utils/NavigationProvider';

const BreadCrumbs = () => {
  const { previousPath } = useContext(NavigationContext);
  const location = useLocation();
  const matches = useMatches();
  const crumbs = matches
    .filter((match) => Boolean(match.handle?.crumb))
    .map((match) => match.handle.crumb(match.data));

  const formatPath = (path) => {
    // 处理根路径显示，避免空字符串
    if (path === '/') return 'HOME';
    return path.replace(/-|\//g, ' ').trim().toUpperCase();
  };

  return (
    <div className='breadcrumbs'>
      <div className='breadcrumbs__container'>
        <span>{crumbs[0].props.children.toUpperCase()}</span>
        <div className='breadcrumbs__path'>
          {/* 没有上一页时隐藏上路径和分隔符 */}
          {previousPath !== location.pathname && (
            <>
              <span>{formatPath(previousPath)}</span>
              <p>/</p>
            </>
          )}
          <span>{formatPath(location.pathname)}</span>
        </div>
      </div>
    </div>
  );
};

export default BreadCrumbs;

关键说明 #

• 把路径监听逻辑移到Provider内部，用useLocation自动监听路径变化，确保状态更新顺序正确
• 移除手动触发的handleNavigation，避免闭包导致的状态读取异常
• 新增路径格式化的边界处理，比如根路径显示为HOME
• 加了判断逻辑，初始加载或没有上一页时不显示多余的路径和分隔符

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