Building a Dynamic Navigation bar with react router in react js 2025
Building a Dynamic Navigation Bar with React Router in React JS 2025
In modern React applications, a dynamic navigation bar improves user experience and helps manage routes efficiently. Here's how to build one using React Router v6.4+.
// 1. Install react-router-dom
// npm install react-router-dom
// 2. Setup your router
import { BrowserRouter as Router, Routes, Route, NavLink } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
function App() {
return (
);
}
// 3. Create Navbar with dynamic links
function Navbar() {
const navItems = [
{ name: "Home", path: "/" },
{ name: "About", path: "/about" },
{ name: "Contact", path: "/contact" },
];
return (
);
}
✅ Advantages: Reusable routes, clean structure, active class styling, and scalability.
🚫 Common mistake: Forgetting to use NavLink for active state styling.