Day-45 React Router Tutorial with a Simple Example — Step-by-Step Guide

When building single-page applications (SPAs) with React, handling navigation between pages is crucial. Unlike traditional websites, React doesn't reload the entire page — it updates components based on the URL. This is achieved using React Router.

In this blog, I’ll walk you through React Router with a simple project I built, explaining each part step-by-step.

What is React Router?

React Router is the standard routing library for React. It allows developers to manage navigation in a React application without refreshing the page.

Benefits:

• Enables navigation between different views.


• Changes the URL without reloading the page.


• Keeps the UI in sync with the URL.


• Supports nested and dynamic routing.

How to Install React Router

Install react-router-dom by running:

npm install react-router-dom

Or if you're using Yarn:

yarn add react-router-dom

Core Components Used

• 
  BrowserRouter: Enables routing functionality using the browser's history API.


• 
  Routes: A container for all Route components.


• 
  Route: Defines a route mapping URL to a component.


• 
  Link: Navigation component that prevents full-page reload.


• 
  Outlet: Placeholder where child routes are rendered inside the parent route (useful for layouts).

React Router Example — My Project

Folder Structure

src/

├── App.js

├── pages/

│   ├── Home.js

│   ├── Blogs.js

│   ├── Contact.js

│   └── Layout.js

App.js — Main Routing File

import React from 'react';

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

import Home from './pages/Home';

import Contact from './pages/Contact';

import Layout from './pages/Layout';

import Blogs from './pages/Blogs';



function App() {

  return (

    <BrowserRouter>

      <Routes>

        <Route path="/" element={<Layout />}>

          <Route index element={<Home />} />

          <Route path="blogs" element={<Blogs />} />

          <Route path="contact" element={<Contact />} />

        </Route>

      </Routes>

    </BrowserRouter>

  );

}



export default App;

Explanation:

• 
  <BrowserRouter> wraps the entire app.


• The parent <Route> with path="/" uses the <Layout /> component as the shared layout.


• 
  

  Inside <Layout>, we define child routes:

  
  
  
  
  
  • 
    / → Home
  
  
  • 
    /blogs → Blogs
  
  
  • 
    /contact → Contact
  
  
  
  
  
  




• The index prop makes the Home page the default route when visiting /.

Layout.js — Shared Layout with Navigation

import { Outlet, Link } from 'react-router-dom';



function Layout() {

  return (

    <div>

      <nav>

        <ul>

          <li>

            <Link to="/">Home</Link>

          </li>

          <li>

            <Link to="/blogs">Blogs</Link>

          </li>

          <li>

            <Link to="/contact">Contact</Link>

          </li>

        </ul>

      </nav>



      <Outlet /> {/* Child components render here */}

    </div>

  );

}



export default Layout;

Explanation:

• The navigation bar contains Link components.


• 
  Link replaces traditional <a> tags to prevent page reloads.


• 
  <Outlet /> is where the current page (Home, Blogs, or Contact) will be displayed.

Home.js

import React from 'react';



function Home() {

  return (

    <div>Home</div>

  );

}



export default Home;

Blogs.js

import React from 'react';



function Blogs() {

  return (

    <div>Blogs</div>

  );

}



export default Blogs;

Contact.js

import React from 'react';



function Contact() {

  return (

    <div>Contact</div>

  );

}



export default Contact;

How Navigation Works

• When you visit / → Home page loads.


• When you visit /blogs → Blogs page loads.


• When you visit /contact → Contact page loads.


• Navigation happens without page reloads.

Conclusion

React Router makes it simple and powerful to handle routing in React applications. Using BrowserRouter, Routes, Route, Link, and Outlet, you can easily create:

• Multi-page navigation


• Shared layouts


• Smooth client-side transitions