Create a basic Navbar using React Router v6

Last Updated : 28 Apr, 2025

React Router is a library for handling routing and navigation in React JS Applications. It allows you to create dynamic routes, providing a seamless user experience by mapping various URLs to components. It enables navigation in a single-page application (SPA) without refreshing the entire page.

React Router recently released version 6, and earlier version 5 of React Router was used. A lot of changes have been made in v6. In this article, we will understand how to create a basic navbar using React Router v6.

Use <Link> Instead of <a> to prevent full page reloads in React apps.
<Link> uses the to attribute instead of href for navigation
Define routes using createBrowserRouter for structured routing.
Wrap your app with RouterProvider and pass the router using the router prop.
Use <NavLink> instead of Link to identify the active route.
<NavLink> automatically adds an active class to the current Link.
Customize the appearance of the active link using the .active class in CSS.

Example: className={({ isActive }) => isActive ? 'active' : ''} for conditional styling.

Steps to Create a React App and Install React Router v6

Step 1: Create a React project folder, open the terminal, and write the following command.

bash

# Run this to use npm npx create-react-app foldername # Or run this to use yarn yarn create react-app foldername

Step 2: Navigate to the root directory of your project using the following command.

bash

cd foldername

Step 3: Now, install the React Router library

bash

npm install react-router-dom or yarn add react-router-dom

Follow this Project Structure for React Router v6:

The updated dependencies in package.json file will look like:

bash

"dependencies": {     "react": "^18.2.0",     "react-dom": "^18.2.0",     "react-scripts": "5.0.1",     "web-vitals": "^2.1.4",     "react-router-dom": "^6.22.0" }

Syntax to setup Browser Router:

bash

import { createBrowserRouter } from "react-router-dom"; const router = createBrowserRouter([   {     path: "/"     element:    } ]);

Example: Below is an example of creating a basic Navbar using React Router v6.

App.css

/* App.css */  * {     padding: 0;     margin: 0; } body {     font-family: system-ui; } nav {     padding: 10px;     margin-bottom: 10px;     background: green; } ul {     list-style-type: none; } li {     display: inline;     margin-right: 20px; } a {     text-decoration: none;     color: white; }  a:hover {     color: #eee; }

NavBar.js

// NavBar.js  import { Link } from 'react-router-dom'; const Navbar = () => {     return (                 Home                 About                 Projects                 Contact     ); } export default Navbar;

Index.js

// index.js import React from 'react' import ReactDOM from 'react-dom/client' import {     RouterProvider,     createBrowserRouter } from 'react-router-dom' import App from './App' import Home from './Home' import About from './About' import Projects from './Projects' import Contact from './Contact' const router = createBrowserRouter([     {         path: '/',         element: ,         children: [             {                 path: '/',                 element: ,             },             {                 path: '/about',                 element: ,             },             {                 path: '/projects',                 element: ,             },             {                 path: '/contact',                 element: ,             },         ]     } ]); ReactDOM.createRoot(document.getElementById('root')).render()

App.js

// App.js import { Outlet } from "react-router-dom"; import "./App.css"; import Navbar from "./NavBar"; const App = () => {     return (         <> );         }; export default App;

Home.js

// Home.js const Home = () => { return Home; } export default Home;

About.js

// About.js const About = () => { return About; } export default About;

Project.js

// Projects.js const Projects = () => { return Projects; } export default Projects;

Contact.js

// Contact.js const Contact = () => { return Contact; } export default Contact;

Start your application using the following command.

bash

npm start

Output:

Example 2: Below is an example of creating a Navbar using React Router v6 and NavLink.

App.css

/* App.css */ * {   padding: 0;   margin: 0; } body {     font-family: system-ui; } nav {     padding: 10px;     margin-bottom: 10px;     background: green; } ul {     list-style-type: none; } li {     display: inline;     margin-right: 20px; } a {     text-decoration: none;     color: white; }  a:hover {     color: #eee; }  a.active {      text-decoration: underline;  }

NavBar.js

// NavBar.js import { NavLink } from 'react-router-dom';   const Navbar = () => {     return (                 Home                 About                 Projects                 Contact     ); }  export default Navbar;

Home.js

// Home.js const Home = () => { return Home; } export default Home;

About.js

// About.js const About = () => {     return About; } const Projects = () => {     return Projects; } const Contact = () => {     return Contact; } export default Contact; export default Projects; export default About;

Output:

createRoutesFromElements

If you do not like the syntax to create routes from these objects then we can also use element instead of objects. To do this, we will call another function in createBrowserRouter which is createRoutesFromElements and in this function, we will set up the routes.

Example: Below is an sample example of createRoutesFromElements.

App.jsx

import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import Home from "./Home"; import About from "./About"; import Projects from "./Projects"; import Contact from "./Contact"; import {     RouterProvider,     createBrowserRouter,     createRoutesFromElements,     Route, } from "react-router-dom";  const router = createBrowserRouter(     createRoutesFromElements(         }> } /> } /> } /> } /> ) ); ReactDOM.createRoot(document.getElementById("root")).render();