Can anyone tell me problem with this code? Navbar is not getting displayed

Question

In console this error is getting displayed: enter image description here

Everything is fine but navbar is not getting displayed with the error above.

Here is my App.js file

import Navbar from './components/Navbar';
import './App.css';
import AddEmployee from './components/AddEmployee';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import EmployeeList from './components/EmployeeList';

function App() {
  return (
    <>
      <BrowserRouter>
        <Navbar/>
        <Routes>
          <Route index element={<EmployeeList/>}/>
          <Route path="/" element={<EmployeeList/>}></Route>
          <Route path ="/employeeList" element={<EmployeeList/>}></Route>
          <Route path ="/addEmployee" element={<AddEmployee/>}></Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

Navbar.js

import React from 'react'

const Navbar = () => {
  return (
    <div className="bg-gray-800">
      <div className='h-16 px-8 flex items-center'>
        <p className='text-white font-bold'>Employee Management System </p>
      </div>
    </div>
  )
}
export default Navbar;

AddEmployee.js

import React, {useState} from 'react'
import employeeService from '../services/employeeService';

const AddEmployee = () => {

    const [employee, setEmployee] = useState({
        id: "",
        firstName: "",
        lastName: "",
        emailId: "",
    })

    const handleChange = (e) => {
        const value = e.target.value;
        setEmployee({...employee,[e.target.name] : value});
    }
    
    const saveEmployee = e => {
        e.preventDefault();
        employeeService.saveEmployee(employee).then((response) =>{
            console.log(response);
        }).catch((err) => {
            console.log(err);
        })
    }

  return (
    <div className="flex max-w-2xl mx-auto shadow border-b">
        <div className="px-8 py-8">
            <div className="font-thin text-2xl tracking-wider">
                <h1>Add New Employee</h1>
            </div>
            <div className="justify-center items-center h-14 w-full my-4">
                <label className="block text-gray-600 text-sm font-normal" >First Name</label>
                <input className="h-10 w-96 border mt-2 px-2 py-2"
                 type="text"
                 value = {employee.firstName}
                 onChange = {(e) => handleChange(e)}
                 name="firstName"></input>
            </div>

            <div className="justify-center items-center h-14 w-full my-4">
                <label className="block text-gray-600 text-sm font-normal" >Last Name</label>
                <input className="h-10 w-96 border mt-2 px-2 py-2" 
                type="text"
                value = {employee.lastName}
                onChange = {(e) => handleChange(e)}
                name="lastName"></input>
            </div>

            <div className="justify-center items-center h-14 w-full my-4">
                <label className="block text-gray-600 text-sm font-normal" >E-Mail</label>
                <input className="h-10 w-96 border mt-2 px-2 py-2" 
                type="email"
                value = {employee.emailId}
                onChange = {(e) => handleChange(e)}
                name="emailId"></input>
            </div>

            <div className="justify-center items-center h-14 w-full my-4 space-x-4">
                <button 
                className="rounded text-white font-semibold bg-red-600 px-6 hover:bg-green-500 py-2"
                onClick={saveEmployee}>
                     Save
                </button>
                <button 
                className="rounded text-white font-semibold bg-orange-600 px-6 hover:bg-green-500 py-2"
                > 
                Clear 
                </button>
            </div>
        </div>
    </div>
  )
}

export default AddEmployee;

It doesnot contain much but just check if there is any error EmployeeList.js

import React from 'react'

const EmployeeList = () => {
  return (
    <div>EmployeeList</div>
  )
}

export default EmployeeList;

when i am using addEmployee route navbar is working properly but this error persists even then.

Why do you have indek in the first root ? Try without this line — adir, Aug 17 '22 at 19:45
you can't add a element in `` if you want the `` be in all pages you should add it to all `` elements — Philo, Aug 17 '22 at 19:45
The `Navbar` export/import looks to be in agreement. Check the export and import of `AddEmployee` and `EmployeeList` one or both have an issue and `App` is failing to render. — Drew Reese, Aug 17 '22 at 19:46
@DrewReese Ok Thanks a lot this is a new important information for me — Philo, Aug 17 '22 at 22:18
@DrewReese I have added AddEmployee and EmployeeList files too. Please check if there is any error. And please suggest if this error can be a problem of react router? — ABHINAV SINGH, Aug 17 '22 at 22:38
I've copy/pasted your code into a running [codesandbox](https://codesandbox.io/s/can-anyone-tell-me-problem-with-this-code-navbar-is-not-getting-displayed-6qmjdi) don't notice any errors. I had to comment out the `employeeService` import in `AddEmployee`, but otherwise the app and components all render without issue. Try commenting out all the routes and run the app, and then 1-by-1 uncomment the routes until the app breaks/fails to render. Recurse and repeat until you find the offending component that isn't exported/imported correctly. — Drew Reese, Aug 17 '22 at 22:54

score -1 · Answer 1 · edited Aug 23 '22 at 05:59

-1

Be sure that BrowserRouter is the first element in the Return

<BrowserRouter>
   <>
      <Navbar/>
      <Routes>
      ....
   </>
</BrowserRouter>

edited Aug 23 '22 at 05:59

Jan

4,974
3
26
43

answered Aug 17 '22 at 19:53

ahmad saman

1

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](/help/how-to-answer). – jasie Aug 23 '22 at 10:56

Can anyone tell me problem with this code? Navbar is not getting displayed

1 Answers1