React Router v6中this.props为空引发路由跳转失败问题求助

react-router-dom v6 不再自动给路由组件注入history、location等路由相关 props，所以你的类组件ListEmployeeComponent无法通过this.props.history获取路由对象，导致调用push方法时报错。

方案1：保留类组件，用函数组件包装传递导航功能 #

因为类组件无法直接使用 React Router v6 的 Hooks，我们可以写一个函数组件作为包装层，通过useNavigate获取导航方法后传递给类组件。

步骤1：创建包装组件 #

import { useNavigate } from 'react-router-dom';
import ListEmployeeComponent from './ListEmployeeComponent';

const ListEmployeeWrapper = () => {
  const navigate = useNavigate();
  
  const navigateToCreate = () => {
    navigate('/create');
  };
  
  return <ListEmployeeComponent navigateToCreate={navigateToCreate} />;
};

export default ListEmployeeWrapper;

步骤2：修改原类组件 #

import React, { Component } from "react";
import EmployeeService from "../services/EmployeeService";

class ListEmployeeComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      employees: [],
    };
    this.addEmployee = this.addEmployee.bind(this);
  }

  componentDidMount() {
    EmployeeService.getEmployees().then((res) => {
      this.setState({ employees: res.data });
    });
  }

  addEmployee() {
    this.props.navigateToCreate(); // 使用传递过来的导航方法
  }

  render() {
    return (
      <div>
        <h2 className="text-center">Employees List</h2>
        <button className="btn btn-primary" onClick={this.addEmployee}>Add Employee</button>
      </div>
    );
  }
}

export default ListEmployeeComponent;

步骤3：更新路由配置 #

<Routes>
    <Route path="/" exact element={<ListEmployeeWrapper />}></Route>
</Routes>

方案2：改为函数组件（React Router v6 推荐方式） #

直接将类组件转为函数组件，使用useNavigate Hook 处理导航逻辑，更贴合 v6 的设计思路。

修改后的组件代码：

import React, { useEffect, useState } from "react";
import EmployeeService from "../services/EmployeeService";
import { useNavigate } from 'react-router-dom';

const ListEmployeeComponent = () => {
  const [employees, setEmployees] = useState([]);
  const navigate = useNavigate();

  useEffect(() => {
    EmployeeService.getEmployees().then((res) => {
      setEmployees(res.data);
    });
  }, []);

  const addEmployee = () => {
    navigate('/create');
  };

  return (
    <div>
      <h2 className="text-center">Employees List</h2>
      <button className="btn btn-primary" onClick={addEmployee}>Add Employee</button>
    </div>
  );
};

export default ListEmployeeComponent;

路由配置无需修改，保持原代码即可：

<Routes>
    <Route path="/" exact element={<ListEmployeeComponent />}></Route>
</Routes>

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