React类组件中使用react-router-dom跳转页面及传参问题

问题核心原因 #

Google Maps的DistanceMatrixService回调函数是在React组件的渲染周期/上下文之外执行的，直接在回调里返回或渲染<Navigate>组件不会触发React的路由更新——因为这部分JSX没有被纳入组件的正常渲染输出流程中。

解决方案：使用命令式导航useNavigate #

放弃在回调里用<Navigate>组件，改用React Router提供的useNavigate钩子实现命令式跳转，同时通过路由state传递数据。

1. 在MyGoogleMap组件中实现跳转

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

function MyGoogleMap() {
  const navigate = useNavigate(); // 初始化导航函数

  const fetchDistanceMatrix = () => {
    const service = new window.google.maps.DistanceMatrixService();
    service.getDistanceMatrix(
      {
        origins: ['北京'],
        destinations: ['上海'], // 替换为你的实际目标地点数据
        travelMode: 'DRIVING',
      },
      (response, status) => {
        if (status === 'OK') {
          // 调用navigate实现跳转，通过state传递数据
          navigate('/', {
            state: {
              destinations: ['上海'], // 你的destinations数据集
              response: response
            }
          });
        }
      }
    );
  };

  // 组件渲染逻辑...
  return <div>...</div>;
}

2. 在首页组件中接收传递的数据

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

function Home() {
  const location = useLocation();
  // 获取跳转时传递的数据，做空值处理避免报错
  const { destinations, response } = location.state || {};

  // 使用数据渲染页面...
  return (
    <div>
      {destinations && <p>目标地点：{destinations.join(', ')}</p>}
      {/* 这里添加response数据的渲染逻辑 */}
    </div>
  );
}

额外注意事项 #

• 路由state里的数据仅在会话期间有效，如果用户刷新首页，state数据会丢失。如果需要持久化数据，可以考虑：
  • 将数据序列化为字符串后通过URL查询参数传递（注意数据大小限制）
  • 临时存储在localStorage/sessionStorage中，首页加载时读取并清除
• 确保MyGoogleMap组件被包裹在BrowserRouter提供的路由上下文内，否则useNavigate钩子会抛出错误。

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