React Router Link跳转同URL传递不同state不刷新问题求助

React Router 默认情况下，当跳转的URL和当前页面路径相同时，不会重新挂载目标组件，只会更新location对象里的state。这就导致组件不会自动刷新来加载新的state数据，下面提供几种可行的解决思路：

1. 在目标组件中监听location.state变化 #

在你要跳转的目标页面组件（比如/ecgo-5对应的组件）里，使用useLocation钩子获取当前location，再用useEffect监听location.state的变化，一旦state更新就重新加载数据：

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

function Ecgo5Page() {
  const location = useLocation();
  const [detailData, setDetailData] = useState(null);

  // 监听state.id的变化，触发数据重新请求
  useEffect(() => {
    if (!location.state?.id) return;
    
    const loadDetail = async () => {
      // 这里替换成你的实际数据请求逻辑
      const response = await fetch(`/api/vehicle/${location.state.id}`);
      const data = await response.json();
      setDetailData(data);
    };

    loadDetail();
  }, [location.state]); // 依赖项设为location.state，变化时执行

  return (
    <div>
      {detailData ? (
        <div>
          <h2>{detailData.name}</h2>
          <p>{detailData.description}</p>
        </div>
      ) : (
        <div>加载中...</div>
      )}
    </div>
  );
}

2. 使用useNavigate手动触发跳转（替代Link） #

如果不想依赖组件监听，可以用useNavigate钩子手动处理跳转逻辑，即使路径相同，也会强制更新location.state：

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

function VehicleItem({ items }) {
  const navigate = useNavigate();

  const handleGoToDetail = () => {
    const targetPath = items.vehicleModelId === 2 
      ? '/ecgo-3' 
      : items.vehicleModelId === 3 ? '/ecgo-5' : '';
    
    if (!targetPath) return;

    navigate(targetPath, {
      state: { id: items.id },
      // 可选：设置replace为true，不会添加新的历史记录条目
      // replace: true
    });
  };

  return (
    <span onClick={handleGoToDetail} style={{ cursor: 'pointer' }}>
      {items.name}
    </span>
  );
}

3. 给目标组件添加唯一key（辅助方案） #

如果你的组件是通过路由渲染的，可以在路由配置里给组件加上基于location.state.id的key，这样当state变化时，React会认为是新的组件实例，从而重新挂载：

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

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

  return (
    <Routes location={location}>
      <Route 
        path="/ecgo-5" 
        element={<Ecgo5Page key={location.state?.id || 'default'} />} 
      />
      <Route path="/ecgo-3" element={<Ecgo3Page />} />
    </Routes>
  );
}

这种方式会重新挂载组件，适合需要完全重置组件状态的场景，但注意不要过度使用，因为重新挂载会带来额外的性能开销。

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