Component does not display or change when clicking the navBar button

Question

When I click any button on Navabar then component is not changing or displaying. But if I change in url and hit the enter button then component coming successfully. Here I mentioned my code below

I have used react-router-dom@5.2.0

import React from "react";
import { Nav, Navbar } from "react-bootstrap";
import { Link } from "react-router-dom";

const AppNavBar = () => {
return (
  <>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <Link class="nav-link" to="/">
              HOME
            </Link>
          </li>
          <li class="nav-item">
            <Link class="nav-link" to="/employee">
              EMPLOYEE
            </Link>
          </li>
          <li class="nav-item">
            <Link class="nav-link" to="/admin">
              ADMIN
            </Link>
          </li>
        </ul>
      </div>
);
};

export default AppNavBar;

In App.js--



function App() {
  return (
    <>
      <Router>
        <AppNavBar />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/employee" component={Employee} />
          <Route exact path="/admin" component={Admin} />
        </Switch>
      </Router>
    </>
  );
}

export default App;

Not exactly related, but you should definitely use "className" instead of "class" — Blind2k, May 01 '22 at 07:41

score 0 · Answer 1 · answered May 01 '22 at 05:36

0

Do this in App.js

  <Routes>
      <Route exact path="/"  element={<Home />}/>
      <Route exact path="/employee" element={<Employee />} />
      <Route exact path="/admin" element={<Admin />} />
  </Routes>

answered May 01 '22 at 05:36

Arezou Saremian

508
3
8

I have used react-router-dom@5.2.0 – Saptarshi May 01 '22 at 07:04

Component does not display or change when clicking the navBar button

1 Answers1