React中如何检测重定向？useEffect未触发问题求助

为什么你的useEffect没触发？ #

逐个分析你尝试的三种写法问题：

• 依赖router.query.data：如果router.query是同一个对象引用（仅内部data属性变化），且你使用的不是react-router-dom官方提供的查询参数获取方式，React的浅比较可能无法识别data的变化；另外如果路由跳转是同组件复用（比如同路径仅query变化），部分自定义路由库的query对象可能不会更新引用，导致useEffect不触发。
• 依赖空数组[]：这种写法只会在组件首次挂载时执行一次，路由变化（重定向）如果组件未卸载，自然不会触发。
• 依赖router.query：React的useEffect依赖是浅比较，如果router.query对象的引用未改变（仅内部属性更新），React会认为依赖没有变化，所以不触发useEffect。

正确的监听方式（react-router-dom v6） #

方法1：使用useSearchParams #

react-router-dom提供的useSearchParams会在查询参数变化时返回新的实例，能被React正确检测到：

import { useSearchParams } from 'react-router-dom';
import { useEffect } from 'react';

function YourComponent() {
  const [searchParams] = useSearchParams();

  useEffect(() => {
    const data = searchParams.get('data');
    if (data) {
      console.log('LRAL useff get called', data);
      // 这里处理你的业务逻辑
    }
  }, [searchParams]);

  return <div>...</div>;
}

方法2：使用useLocation监听search属性 #

useLocation返回的search是查询参数字符串，每次路由变化（包括query更新）都会生成新字符串，能触发useEffect：

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

function YourComponent() {
  const location = useLocation();

  useEffect(() => {
    const searchParams = new URLSearchParams(location.search);
    const data = searchParams.get('data');
    if (data) {
      console.log('LRAL useff get called', data);
      // 这里处理你的业务逻辑
    }
  }, [location.search]);

  return <div>...</div>;
}

如何检测重定向的发生？ #

重定向本质是路由变化，可通过以下两种方式检测：

1. 监听location变化对比前后路由 #

通过useRef记录上一次的路由信息，对比当前路由判断是否发生变化（包括重定向）：

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

function YourComponent() {
  const location = useLocation();
  const prevLocation = useRef(location);

  useEffect(() => {
    const hasRouteChanged = prevLocation.current.pathname !== location.pathname || 
                            prevLocation.current.search !== location.search;
    if (hasRouteChanged) {
      console.log('发生路由变化（可能是重定向）');
      // 可根据业务逻辑进一步判断是否为定向跳转
    }
    prevLocation.current = location;
  }, [location]);

  return <div>...</div>;
}

2. 重定向时携带标记状态 #

如果是通过useNavigate或Navigate组件发起重定向，可携带state标记，在目标组件中检测：

// 发起重定向的组件
import { useNavigate } from 'react-router-dom';

function RedirectSource() {
  const navigate = useNavigate();
  const redirect = () => {
    // 携带重定向标记
    navigate('/target?data=xxx', { state: { isRedirect: true } });
  };

  return <button onClick={redirect}>重定向</button>;
}

// 目标组件
function TargetComponent() {
  const location = useLocation();

  useEffect(() => {
    if (location.state?.isRedirect) {
      console.log('这是一次重定向');
      // 清除state，避免页面刷新后标记仍存在
      window.history.replaceState({}, document.title);
    }
  }, [location.state]);

  return <div>...</div>;
}

内容的提问来源于stack exchange，提问作者János