react-router-dom useNavigate传参失败问题求助

问题根源 #

1. ComponentA中未定义id变量：点击按钮时会先抛出变量未定义的错误，导致navigate方法无法正确执行，state自然无法传递到ComponentB。
2. ComponentB未处理location.state为null的情况：如果直接刷新/new页面或手动输入URL访问，location.state会是null，直接解构会触发崩溃。

修复代码 #

修复ComponentA（定义缺失的变量） #

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

function ComponentA() {
  const navigate = useNavigate();
  // 定义id变量（根据实际业务场景赋值）
  const id = 123;

  const handleButtonClick = () => {
    navigate('/new', { state: { myid: id, mypath: 'Home' } });
  };

  return (
    <div>
      <button onClick={handleButtonClick}>跳转至ComponentB</button>
    </div>
  );
}

修复ComponentB（添加容错处理） #

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

function ComponentB() {
  const location = useLocation();
  // 给state设置默认空对象，避免解构null报错
  const { myid, mypath } = location.state || {};

  return (
    <div>
      <p>myid: {myid}</p>
      <p>mypath: {mypath}</p>
    </div>
  );
}

export default ComponentB;

额外注意事项 #

• 路由跳转传递的state仅在通过navigate或Link组件跳转时存在，直接刷新目标页面或手动输入URL会导致location.state丢失，所以必须添加容错逻辑。
• 确保路由配置正确，/new路由已关联ComponentB：

import { Routes, Route } from 'react-router-dom';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

function App() {
  return (
    <Routes>
      <Route path="/" element={<ComponentA />} />
      <Route path="/new" element={<ComponentB />} />
    </Routes>
  );
}

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