React - Navigation


Navigation with React Router

Navigation is a fundamental part of any web application. In traditional websites, navigation usually reloads the entire page whenever a user clicks a link. React applications work differently. Most React apps are Single Page Applications (SPAs), meaning the page does not reload when users move between sections. Instead, different components are rendered dynamically.

A Single Page Application (SPA) is a type of web application in which all user interactions take place on a single web page, without reloading the entire page from the server.

Although it appears to have multiple pages, an SPA actually loads one HTML file and dynamically updates the content using JavaScript.

How a Single Page Application Works

  • The browser loads a single HTML file (usually index.html).
  • JavaScript (for example, React) renders the user interface.
  • When a user clicks a link, only the required content changes.
  • The page is updated dynamically without a full reload.
  • This creates a smooth, fast, and app-like experience.
  • Even though URLs change, React swaps components instead of reloading pages.

To achieve this type of navigation in React, we use a powerful library called React Router.

1. What Is React Router?

 
React Router is a standard routing library for React. It allows you to:
 
  • Map URLs to React components
  • Navigate between pages without refreshing the browser
  • Create dynamic and nested routes
  • Build fast, user-friendly navigation systems
 
React itself does not include routing features. React Router fills this gap and gives developers full control over client-side navigation.
 
 

2. Installing react-router-dom

 
Prerequisites
 
Before installing React Router, make sure you have:
 
  • Node.js installed
  • npm or yarn installed
  • A working React application (created using `create-react-app`, Vite, or similar tools)
 
 
Installing React Router
 
React Router for web applications is provided through the `react-router-dom` package. To install the latest stable version (v6), open your project folder in the terminal and run:
 
 
npm i react-router-dom@6
 
 
Verifying the Installation
 
After installation, open the package.json file in your project. You should see react-router-dom listed under dependencies, similar to this:
 
json
 
“dependencies”: {
  “react”: “^18.x.x”,
  “react-dom”: “^18.x.x”,
  “react-router-dom”: “^6.x.x”
}
 
This confirms that React Router has been installed successfully.
 

 

3. Understanding Core React Router Components

 
Before creating a navbar, it is important to understand the key components provided by React Router.
 
BrowserRouter
BrowserRouter enables routing using the browser’s History API. It must wrap your application so that routing works correctly.
 
Routes
Routes is a container that holds all route definitions.
 
Route
Route maps a URL path to a React component.
 
Link
Link replaces traditional anchor (<a>) tags and allows navigation without reloading the page.
 
 
 

4. Setting Up React Router in the Application

 
Wrapping the App with BrowserRouter
 
React Router components must be rendered inside a router. The recommended approach is to wrap your App component in BrowserRouter inside index.js.
 
Example:
 
import React from “react”;
import ReactDOM from “react-dom/client”;
import { BrowserRouter } from “react-router-dom”;
import App from “./App”;
 
const root = ReactDOM.createRoot(document.getElementById(“root”));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);
 
 
This ensures that routing is available throughout the entire application.
 
 
 

5. Creating Components for Navigation

 
For demonstration purposes, assume we have the following components:
 
  • Home.js
  • About.js
  • Contact.js
 
Each component returns simple content.
 
Example 
 
Home.js:
function Home() {
  return <h2>Welcome to the Home Page</h2>;
}
 
export default Home;
 
 
About.js
function About() {
  return <h2>Welcome to the About Page</h2>;
}
 
export default About;
 
 
Contact.js
function Contact() {
  return <h2>Welcome to the Contact Page</h2>;
}
 

export default Contact;
 

 

6. Using React Router to Create a  Navbar

 
A navbar allows users to move between different sections of the application. In React, the navbar is usually placed at the top and remains visible while the content below changes.
 
 
Importing Required Components
 
Open App.js and import the necessary React Router components:
 
import { Routes, Route, Link } from “react-router-dom”;
import Home from “./Home”;
import About from “./About”;
import Contact from “./Contact”;
 
 
Creating the Navbar Structure
 
Inside the App component, create a navigation bar using the Link component instead of anchor tags.
 
function App() {
  return (
    <div>
      <nav>
        <Link to=”/”>Home</Link>
        <Link to=”/about”>About</Link>
        <Link to=”/contact”>Contact</Link>
      </nav>
 
      <Routes>
        <Route path=”/” element={<Home />} />
        <Route path=”/about” element={<About />} />
        <Route path=”/contact” element={<Contact />} />
      </Routes>
    </div>
  );
}
 
export default App;
 
 
  

7. Why Use Link Instead of Anchor Tags?

 
Using <a href=””> in a React app causes the browser to reload the page, which defeats the purpose of a Single Page Application.
 
Advantages of <Link>
  • Prevents full page reloads
  • Preserves application state
  • Enables faster navigation
  • Works seamlessly with React Router
 
This is why Link should always be used for internal navigation.
 
 
 

8. How Navigation Works Internally

 When a user clicks a Link: 
  • The URL changes in the browser
  • React Router matches the URL with a route
  • The corresponding component is rendered
  • The page does not reload
 
Only the content inside the <Routes> section changes, while the navbar remains visible.
 
 

 

9. Keeping the Navbar Persistent

 
Notice that the <nav> element is placed outside the <Routes> component. This ensures that the navbar stays on the screen regardless of which route is active.
 
This is a common and recommended layout pattern in React applications.
 
 
 

10. Styling the Navbar 

 
You can style the navbar using CSS:
 
nav {
  background-color: #282c34;
  padding: 10px;
}
 
nav a {
  color: white;
  margin-right: 15px;
  text-decoration: none;
}
 
nav a:hover {
  text-decoration: underline;
}
 
 
This improves usability and appearance.
Scroll to Top