React Component Not Rendering the content

Question

React router not rendering my JSX. The initial page renders the content inside. When I click add employee it doesn't display the content of the components. It renders a blank page. I'm a beginner in React.

CreateEmployeeComponent.jsx renders a blank page.

Below is the code of each file. Thanks in advance

App.js

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

function App() {
  return (
    <div>
      <Router>
        <div>
          <HeaderComponent />
          <div className="container">
            <Switch>
              <Route path="/" exact component={ListEmployeeComponent}></Route>
              <Route path="/employees" component={ListEmployeeComponent}></Route>
              <Route path="/add-emplyee" component={CreateEmployeeComponent}></Route>
            </Switch>
          </div>
          <FooterComponent />
        </div>
      </Router>
    </div>

  );
}

export default App;

ListEmployeeComponent

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

    }

    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>
                <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>

                                        </tr>
                                )
                            }
                        </tbody>

                    </table>

                </div>

            </div>
        );
    }
}

export default ListEmployeeComponent;

CreateEmployeeComponent

import React, { Component } from 'react';

class CreateEmployeeComponent extends Component {
    
    render() {
        return (
            <div>
               <h1>Create Employee...</h1>
            </div>
            
        );
    }
}

export default CreateEmployeeComponent;

Answer 1

You got type mistake: /add-emplyee -> /add-employee.

      <Route path="/add-emplyee" component={CreateEmployeeComponent}></Route>

Please check it first