如何不使用Prompt通过React Router在页面离开时获取下一跳转路径

核心前提说明 #

React Router 没有原生API可以在组件卸载阶段直接获取下一个跳转目标路径：组件卸载是路由跳转完成后触发的生命周期，此时原路由上下文已销毁，无法直接拿到跳转前的目标地址，你可以通过以下两种不需要Prompt的方案实现需求。

方案1：全局监听路由存储当前路径 #

通过监听全局路由变化，将最新路径存在全局状态中，组件卸载时直接读取的最新路径就是跳转后的目标路径。

全局路由监听逻辑（根组件实现，React Router v6 适用） #

import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';
// 此处可替换为你项目在用的任意状态管理工具（useContext、Redux、Zustand等）
import { useGlobalStore } from './globalStore';

function App() {
  const location = useLocation();
  const setLatestRoute = useGlobalStore(state => state.setLatestRoute);

  useEffect(() => {
    // 每次路径变化时更新全局存储的最新路径
    setLatestRoute(location.pathname);
  }, [location.pathname, setLatestRoute]);

  // 其余根组件逻辑
  return <AppContent />
}

业务组件使用逻辑 #

import { useGlobalStore } from './globalStore';
import { useEffect } from 'react';

function YourBusinessComponent() {
  const latestRoute = useGlobalStore(state => state.latestRoute);

  useEffect(() => {
    return () => {
      // 卸载时读取的latestRoute就是跳转后的目标路径
      if(latestRoute !== '/something') {
        resetData();
      }
    };
  }, [latestRoute]);

  // 其余组件逻辑
}

方案2：封装自定义跳转方法存储目标路径 #

如果不想全局监听路由，可以封装useNavigate方法，跳转前先把目标路径存入全局变量，组件卸载时直接读取即可。

封装自定义跳转Hook #

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

// 全局变量存储下一跳路径
export let nextRoute = '';

export function useCustomNavigate() {
  const nativeNavigate = useNavigate();
  return (to, options) => {
    // 跳转前先存储目标路径，兼容字符串和对象形式的跳转参数
    nextRoute = typeof to === 'string' ? to : to.pathname;
    nativeNavigate(to, options);
  }
}

业务组件使用 #

1. 所有触发跳转的组件统一使用封装的useCustomNavigate替代原生useNavigate
2. 需做卸载判断的组件直接读取全局存储的nextRoute即可：

import { useEffect } from 'react';
import { nextRoute } from './useCustomNavigate';

function YourBusinessComponent() {
  useEffect(() => {
    return () => {
      if(nextRoute !== '/something') {
        resetData();
      }
    };
  }, []);

  // 其余组件逻辑
}

注意事项 #

使用方案2时必须保证项目内所有路由跳转都调用封装的useCustomNavigate，直接使用原生useNavigate或者a标签跳转都会导致nextRoute取值不准确。

内容的提问来源于stack exchange，提问作者marcus-linmarkson