React路由navigate传参报错：无法读取getParam属性

问题根源 #

1. 传参格式错误：React Router v6 中，navigate 的参数需要放在 state 对象中，而非直接传递
2. 类组件参数获取方式过时：navigation.getParam 是 React Router v5 及更早版本的用法，v6 已移除该 API，且类组件无法直接使用 v6 的 Hooks
3. 额外问题：组件名未遵循首字母大写的 React 规范，可能引发潜在错误；App.js 中 Route 标签未闭合

分步解决方案 #

1. 修正 Selection 组件的传参逻辑

将 navigate 的参数包裹到 state 对象中：

export default function Selection(){
  const navigate = useNavigate();
  
  const handleclick = (params) => {
    let id = params.id;
    let path = '/valid';
    // 修正：参数放入 state 中
    navigate(path, { state: { docId: id } });
  }

  return(
    <DataGrid onCellClick={handleclick} />
  );
}

2. 修正 Validation 组件的参数获取

有两种可行方案，推荐优先使用函数组件方案：

方案一：将类组件改为函数组件（推荐）

使用 useLocation Hook 获取路由状态：

import React from "react";
import { useLocation } from "react-router-dom";

// 组件名首字母大写
export default function Validation() {
  const location = useLocation();
  // 使用可选链避免 undefined 报错
  const rs = location.state?.docId || 'default value';

  return (
    <div>
      <h1> hi {rs}</h1>
    </div>
  );
}

方案二：用高阶组件包装类组件

如果必须保留类组件，需要自己实现 withRouter 高阶组件（v6 官方已移除内置的 withRouter）：
首先创建 withRouter.js：

import { useLocation, useNavigate, useParams } from 'react-router-dom';

export const withRouter = (Component) => {
  const Wrapper = (props) => {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    return <Component {...props} location={location} navigate={navigate} params={params} />;
  };
  return Wrapper;
};

然后修改 Validation 组件：

import React, { Component } from "react";
import { withRouter } from './withRouter'; // 替换为你的文件路径

// 组件名首字母大写
class Validation extends Component {
  render() {
    const { location } = this.props;
    const rs = location.state?.docId || 'default value';

    return (
      <div>
        <h1> hi {rs}</h1>
      </div>
    );
  }
}

export default withRouter(Validation);

3. 修复 App.js 和组件名的规范问题

• 组件名首字母大写：testLayout → TestLayout，validation → Validation
• 闭合 Route 标签：

<Router>
  <Routes>
    <Route path="/test" element={<TestLayout/>} />
    <Route path="/valid" element={<Validation/>} />
  </Routes>
</Router>

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