TypeError: Cannot read properties of undefined (reading 'push') in React Js

Question

I want to navigate to a new page when clicking on a button. I used history but it not working. here is my 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();

here is App.js file

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;

And I created history.js file also below you can see the code of my history.js

import { createBrowserHistory as history} from 'history';

export default history();

below you can see the page code.

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

when I click the add employee button error will show as

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

how can I overcome this error?

What "add employee" button? The error is in that code but you've not included it in your question. All you're showing is the route to the component that apparently renders the button, and handles the click. Please add that code to your question. — Andy
– Andy, Commented Nov 22, 2021 at 4:12
Why are you using an onClick event to change routes? Why not use an a tag with href or the Link component from react-router-dom? I don't think you need history for that. — jgtvares
– jgtvares, Commented Nov 22, 2021 at 4:27

owenizedd · Accepted Answer · 2021-11-22 04:59:34Z

For react-router-dom version 6:

You need to use useNavigate instead.

For functional component:
You can just use it as hooks normally and just use in it.

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

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

For class based component, you need to use a functional component wrapper, here I call it 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;

Collectives™ on Stack Overflow

TypeError: Cannot read properties of undefined (reading 'push') in React Js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related