TypeError：无法在 React Js 中读取未定义的属性（读取“推送”）

Question

单击按钮时，我想导航到新页面。 我使用了历史，但它不起作用。 这是我的 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router} from 'react-router-dom';
import history from './history';

ReactDOM.render(
  <Router history={history}>
        <App/>
    </Router>,
  document.getElementById('root')
);

reportWebVitals();

这是 App.js 文件

import React from 'react';
import logo from './logo.svg';
import './App.css';
import {Router, Route,Routes} from 'react-router-dom'
import EmployeeList from './pages/employeeList';
import AddEmployee from './pages/addEmployee';
import ViewEmployees from './pages/viewEmployees';
import Header from './components/header/Header';
import NavigationBar from './components/Navigation';
import Footer from './components/footer/footer';


function App() {
  return (
    <div>
       <NavigationBar/>
    <div className="container-fluid">
               
               
                <div className="app-main">
                 
                    <Routes> 
                    
                         
                          <Route path = "/employeeList" element={<EmployeeList/>}></Route>
                          <Route path = "/addEmployee/:id" element={<AddEmployee/>}></Route>
                          <Route path = "/viewEmployee/:id" element={<ViewEmployees/>}></Route>
                         
                    </Routes>
                  
                   
                </div>
               
                
       </div>
       <div>
               <Footer/>
       </div>
    </div>
    
  );
}

export default App;

我还在下面创建了 history.js 文件，你可以看到我的 history.js 的代码

import { createBrowserHistory as history} from 'history';

export default history();

下面你可以看到页面代码。

import React, { Component } from 'react'
import EmployeeService from '../employeeServices'


class EmployeeList extends Component {
    constructor(props) {
        super(props)

        this.state = {
                employees: []
        }
        this.addEmployee = this.addEmployee.bind(this);
        this.editEmployee = this.editEmployee.bind(this);
        this.deleteEmployee = this.deleteEmployee.bind(this);
    }

    deleteEmployee(id){
        EmployeeService.deleteEmployee(id).then( res => {
            this.setState({employees: this.state.employees.filter(employee => employee.id !== id)});
        });
    }
    viewEmployee(id){
        this.props.history.push('/viewEmployee/${id}');
    }
    editEmployee(id){
        this.props.history.push('/addEmployee/${id}');
    }

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

    addEmployee(){
        this.props.history.push('/addEmployee/_add');
    }

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

                            <thead>
                                <tr>
                                    <th> Employee First Name</th>
                                    <th> Employee Last Name</th>
                                    <th> Employee Email Id</th>
                                    <th> Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    this.state.employees.map(
                                        employee => 
                                        <tr key = {employee.id}>
                                             <td> {employee.firstName} </td>   
                                             <td> {employee.lastName}</td>
                                             <td> {employee.emailId}</td>
                                             <td>
                                                 <button onClick={ () => this.editEmployee(employee.id)} className="btn btn-info">Update </button>
                                                 <button style={{marginLeft: "10px"}} onClick={ () => this.deleteEmployee(employee.id)} className="btn btn-danger">Delete </button>
                                                 <button style={{marginLeft: "10px"}} onClick={ () => this.viewEmployee(employee.id)} className="btn btn-info">View </button>
                                             </td>
                                        </tr>
                                    )
                                }
                            </tbody>
                        </table>

                 </div>

            </div>
        )
    }
}

export default EmployeeList

当我单击添加员工按钮时，错误将显示为

**TypeError: Cannot read properties of undefined (reading 'push')**

我该如何克服这个错误？

Answer 1

对于react-router-dom 版本 6 ：

您需要改用useNavigate 。

对于功能组件：
您可以正常将其用作挂钩并在其中使用。

import { useNavigate } from 'react-router-dom';
function MyComponent(){
  const navigate = useNavigate();

  useEffect(() => {
     navigate('/to-your-url');
  }, [something]);
}

对于基于 class 的组件，您需要使用功能组件包装器，这里我称之为WithNavigate ：

import React from 'react';
import { useNavigate } from 'react-router-dom'
class MyComponent extends React.Component {
    doSomething(){
      this.props.navigate('/to-your-url');
    }
    render(){
        return(
            <header className='todo-header'>
                <h1 onClick={this.doSomething}>Todo List Saya</h1>
            </header>
        )
    }
}

function WithNavigate(props){
    const navigate = useNavigate();
    return <MyComponent {...props} navigate={navigate}/>
}
export default WithNavigate;

Answer 2

如我所见，您正在使用基于 class 的 function 所以我建议使用 withRouter 希望它对您有所帮助，请参阅下面的链接以获取更多信息。

https://v5.reactrouter.com/web/api/withRouter