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

This content originally appeared on DEV Community and was authored by Tamilselvan K

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

This content originally appeared on DEV Community and was authored by Tamilselvan K

Print Share Comment Cite Upload Translate Updates

APA

Tamilselvan K | Sciencx (2025-06-27T07:30:30+00:00) Day-45 React Router Tutorial with a Simple Example — Step-by-Step Guide. Retrieved from https://www.scien.cx/2025/06/27/day-45-react-router-tutorial-with-a-simple-example-step-by-step-guide/

MLA

" » Day-45 React Router Tutorial with a Simple Example — Step-by-Step Guide." Tamilselvan K | Sciencx - Friday June 27, 2025, https://www.scien.cx/2025/06/27/day-45-react-router-tutorial-with-a-simple-example-step-by-step-guide/

HARVARD

Tamilselvan K | Sciencx Friday June 27, 2025 » Day-45 React Router Tutorial with a Simple Example — Step-by-Step Guide., viewed ,<https://www.scien.cx/2025/06/27/day-45-react-router-tutorial-with-a-simple-example-step-by-step-guide/>

VANCOUVER

Tamilselvan K | Sciencx - » Day-45 React Router Tutorial with a Simple Example — Step-by-Step Guide. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/06/27/day-45-react-router-tutorial-with-a-simple-example-step-by-step-guide/

CHICAGO

" » Day-45 React Router Tutorial with a Simple Example — Step-by-Step Guide." Tamilselvan K | Sciencx - Accessed . https://www.scien.cx/2025/06/27/day-45-react-router-tutorial-with-a-simple-example-step-by-step-guide/

IEEE

" » Day-45 React Router Tutorial with a Simple Example — Step-by-Step Guide." Tamilselvan K | Sciencx [Online]. Available: https://www.scien.cx/2025/06/27/day-45-react-router-tutorial-with-a-simple-example-step-by-step-guide/. [Accessed: ]

rf:citation

» Day-45 React Router Tutorial with a Simple Example — Step-by-Step Guide | Tamilselvan K | Sciencx | https://www.scien.cx/2025/06/27/day-45-react-router-tutorial-with-a-simple-example-step-by-step-guide/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.