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