Client-Side Routing with React Router (v6)

By Ratan Updated: 16 Oct 2026

Configure multi-page navigation without page refreshes using React Router, Routes, Route, and Link.

Level: Beginner to Advanced

Duration: ~60 Mins Deep-Dive

1. Client-Side Routing with React Router

In standard websites, clicking a link requests a brand new page from the server. With React Router v6, link clicks change the browser URL and swap component views instantaneously on the client side without any full-page reload.

2. Installation

npm install react-router-dom

3. Setting Up Routes with `BrowserRouter`

import React from 'react';
import { BrowserRouter, Routes, Route, Link, NavLink } from 'react-router-dom';

import HomePage from './pages/HomePage';
import ExamListPage from './pages/ExamListPage';
import ResultsPage from './pages/ResultsPage';
import NotFoundPage from './pages/NotFoundPage';

function App() {
  return (
    
      
         isActive ? "nav-active" : ""}>Home
         isActive ? "nav-active" : ""}>Available Tests
         isActive ? "nav-active" : ""}>My Reports
      

      
        
          } />
          } />
          } />
          {/* Catch-all 404 Route */}
          } />
        
      
    
  );
}

export default App;