Create a basic Navbar using React Router v6
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.
Approach 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.
# 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.
cd foldername
Step 3: Now, install the React Router library
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:
"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:
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 */
* {
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
import { Link } from 'react-router-dom';
const Navbar = () => {
return (
Home
About
Projects
Contact
);
}
export default Navbar;
// 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
import { Outlet } from "react-router-dom";
import "./App.css";
import Navbar from "./NavBar";
const App = () => {
return (
<> );
};
export default App;
// Home.js
const Home = () => {
return Home;
}
export default Home;
// About.js
const About = () => {
return About;
}
export default About;
// Projects.js
const Projects = () => {
return Projects;
}
export default Projects;
// Contact.js
const Contact = () => {
return Contact;
}
export default Contact;
Start your application using the following command.
npm start
Output:
Example 2: Below is an example of creating a Navbar using React Router v6 and NavLink.
/* 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
import { NavLink } from 'react-router-dom';
const Navbar = () => {
return (
Home
About
Projects
Contact
);
}
export default Navbar;
// Home.js
const Home = () => {
return Home;
}
export default Home;
// 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.
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();
Output:
