I have created a navbar using bootstrap class but navlink is not working and no error generated in terminal
Here is my Navbar.js file
import React from "react";
import "bootstrap/dist/css/bootstrap.css"
import { NavLink } from "react-router-dom";
const Navbar = ()=>{
return (
<div>
<nav className="navbar navbar-expand-lg bg-body-tertiary" >
<div className="container-fluid">
<NavLink className="navbar-brand" href="#">Navbar</NavLink>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav ms-auto mb-2 mb-lg-0">
<li className="nav-item">
<NavLink className="nav-link" href="/">Home</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" href="/about">About</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" href="/contact">Contact</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" href="/login">Login</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" href="/signup">Register</NavLink>
</li>
</ul>
</div>
</div>
</nav>
</div>
)
}
export default Navbar;
This is App.js file code
import React from "react";
import { Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import Contact from "./components/Contact";
import About from "./components/About";
import Login from "./components/Login";
import Signup from "./components/Signup";
const App = ()=>{
return (
<>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="/login" element={<Login />} />
<Route path="/Signup" element={<Signup />} />
</Routes>
</>
)
}
export default App;
and this is home.js file
import React from "react";
import { Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import Contact from "./components/Contact";
import About from "./components/About";
import Login from "./components/Login";
import Signup from "./components/Signup";
const App = ()=>{
return (
<>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="/login" element={<Login />} />
<Route path="/Signup" element={<Signup />} />
</Routes>
</>
)
}
export default App;
Similar to home.js I have created contact and about.js. simple anchor tags are working on the navbar but navlink is not working.