How to route to another react component using button in react-router-dom v6 [duplicate]

Question

I'm completely new to react and got stuck on the following 'route' part. Here is the code:

This is my ListEmployeeComponent :

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

class ListEmployeesComponent 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.history.push('add-employee');
    }

    render() {
        return (
            <div>
                <h2 className="text-center">Employee List</h2>
                <div className="row">
                    <button className="btn btn-primary" onClick={this.addEmployee}>Add Employee</button>
                </div>
                <div className="row">
                    <table className="table table-striped table-bordered">
                        
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Email Id</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        
                        <tbody>
                            {
                                this.state.employees.map(
                                    employee =>
                                    <tr key={employee.id}>
                                        <td>{employee.id}</td>
                                        <td>{employee.firstName}</td>
                                        <td>{employee.lastName}</td>
                                        <td>{employee.email}</td>
                                    </tr>
                                )
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
}

export default ListEmployeesComponent;

And this is my App.js :

import './App.css';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom'
import FooterComponent from './components/FooterComponent';
import HeaderComponent from './components/HeaderComponent';
import ListEmployeesComponent from './components/ListEmployeesComponent';
import CreateEmployeeComponent from './components/CreateEmployeeComponent';

function App() {
  return (
    <div>
      <Router>
        <HeaderComponent/>
        <div className="container">
          <Routes>
            <Route path="/" element={<ListEmployeesComponent/>}></Route>
            <Route path="/home" element={<ListEmployeesComponent/>}></Route>
            <Route path="/add-employee" element={<CreateEmployeeComponent/>}></Route>
          </Routes>
        </div>
        <FooterComponent/>
      </Router>
    </div>
  )
}

export default App;

My issue is that I want to route to CreateEmployeeComponent when the button gets clicked, but there is no action happening when I click the button. I tried checking the new documentation for react-router v6 but it wasn't much help. What can I do differently here to resolve my issue?

rax · Accepted Answer · 2022-01-31 12:50:37Z

2

Solution 1:

You can wrap the button in ListEmployeeComponent using Link from react-router-dom.

<Link to="/add-employee">
   <button className="btn btn-primary">Add Employee</button>
</Link>

reference: react-router-dom

Solution 2:

history in react-router-dom v6 has been replaced by Navigate. So if you want to push /add-employee to history you need to use <Navigate to='/add-employee' push={true}/>

Make following changes in your ListEmployeeComponent.js :

add a state in your constructor:

constructor(props) {
    super(props);
    this.state = {
        navigate: false,
        employees: []
    }
    this.addEmployee = this.addEmployee.bind(this);
}

change your function:

addEmployee() {
   this.props.history.push('add-employee');
}

to

addEmployee() {
  this.setState({
    navigate: true,
  });
}

and change your render method to:

  render() {
    const { navigate } = this.state;
    if (navigate) {
      return <Navigate to="/add-employee" push={true} />;
    }

    return (
      <div>
        <h2 className="text-center">Employee List</h2>
        <div className="row">
        ........
        //rest of the code
  }

reference: react-router-dom-v6 doc

answered Jan 31, 2022 at 12:50

rax

485 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Drew Reese Over a year ago

The history object was not replaced by a Navigate component. Apples and oranges. The history object has been abstracted away and replaced by a navigate function via the useHistory hook. Hooks OFC are not compatible with class-based components, so some additional logic is necessary.

samuei · Accepted Answer · 2022-02-01 09:18:51Z

0

First you have to import link in ListEmployeeComponent and have to use button tags between link tags and you have to add [to="/add-employee"] attributes to link tag

import {Link} from "react-router-dom";

<Link to="/add-employee"> 
    <button 
        className="btn btn-primary" 
        onClick={this.addEmployee}
    >
        Add Employee
    </button>
</Link>

edited Feb 1, 2022 at 9:18

samuei

2,1601 gold badge12 silver badges29 bronze badges

answered Jan 31, 2022 at 11:43

Bharathvault

11 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to route to another react component using button in react-router-dom v6 [duplicate]

2 Answers 2

Solution 1:

Solution 2:

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Solution 1:

Solution 2:

1 Comment

1 Comment

Linked

Related