React

React Router App (Step-by-Step Navigation Example)

updated on Leave a Comment on React Router App (Step-by-Step Navigation Example)

📌 INTRODUCTION

Routing is an essential concept in React. It allows users to navigate between different pages or views in a single-page application without reloading the entire website.

Using React Router, we can build applications with multiple pages such as:

  • Home
  • About
  • Contact

In this program, we will create a simple React Router App and learn how navigation works in React.

📘 PROBLEM STATEMENT

👉 Create a router app using React.

💡 CONCEPTS USED

  • React Router
  • Components
  • Navigation Links
  • Routes
  • BrowserRouter
  • Single Page Application (SPA)

🧠 LOGIC EXPLANATION

The application works as follows:

  1. Install React Router
  2. Create multiple components such as Home, About, and Contact
  3. Wrap the app inside BrowserRouter
  4. Define routes using Routes and Route
  5. Create navigation links using Link
  6. Display the correct page when a link is clicked

⚙️ STEP 1: CREATE REACT APP

Open terminal and run:

npx create-react-app router-app
cd router-app
npm start

⚙️ STEP 2: INSTALL REACT ROUTER

npm install react-router-dom

📁 PROJECT STRUCTURE

router-app/
│
├── src/
│   ├── App.js
│   ├── Home.js
│   ├── About.js
│   └── Contact.js

💻 PROGRAM CODE

Step 1: Create Home.js

function Home() {
  return (
    <div>
      <h2>Home Page</h2>
      <p>Welcome to the Home page of the React Router App.</p>
    </div>
  );
}

export default Home;

Step 2: Create About.js

function About() {
  return (
    <div>
      <h2>About Page</h2>
      <p>This page contains information about the application.</p>
    </div>
  );
}

export default About;

Step 3: Create Contact.js

function Contact() {
  return (
    <div>
      <h2>Contact Page</h2>
      <p>This page contains contact details.</p>
    </div>
  );
}

export default Contact;

Step 4: Update App.js

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

function App() {
  return (
    <BrowserRouter>
      <div style={{ textAlign: "center" }}>
        <h1>React Router App</h1>

        <nav style={{ marginBottom: "20px" }}>
          <Link to="/" style={{ margin: "10px" }}>Home</Link>
          <Link to="/about" style={{ margin: "10px" }}>About</Link>
          <Link to="/contact" style={{ margin: "10px" }}>Contact</Link>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

🖥️ OUTPUT

When the application runs, you will see:

React Router App

Home   About   Contact
----------------------
Home Page
Welcome to the Home page of the React Router App.

When clicking About:

About Page
This page contains information about the application.

When clicking Contact:

Contact Page
This page contains contact details.

🔍 STEP-BY-STEP EXPLANATION

1. Import React Router Components

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

These are used for routing and navigation.

2. Use BrowserRouter

<BrowserRouter>

This wraps the whole application and enables routing.

3. Create Navigation Links

<Link to="/about">About</Link>

Link is used instead of <a> tag because it avoids full page reload.

4. Define Routes

<Routes>
  <Route path="/" element={<Home />} />
</Routes>

This tells React which component should be displayed for each path.

🎯 IMPORTANT ROUTER COMPONENTS

ComponentPurpose
BrowserRouterEnables routing in the app
RoutesGroups all routes
RouteDefines path and component
LinkNavigates between pages

⚡ ADVANCED VERSION: 404 PAGE

You can create a Not Found page for invalid URLs.

Create NotFound.js

function NotFound() {
  return <h2>404 - Page Not Found</h2>;
}

export default NotFound;

Update App.js

import NotFound from "./NotFound";

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/contact" element={<Contact />} />
  <Route path="*" element={<NotFound />} />
</Routes>

⚡ ADVANCED VERSION: NAVLINK FOR ACTIVE STYLE

Instead of Link, use NavLink:

import { NavLink } from "react-router-dom";
<NavLink to="/" style={{ margin: "10px" }}>Home</NavLink>

This helps style the active route automatically.

🌟 WHY REACT ROUTER IS IMPORTANT

React Router is important because it helps build:

  • Multi-page-like applications
  • Clean navigation systems
  • Modern single-page applications
  • Professional React projects

📚 REAL-WORLD USE CASE

React Router is used in:

  • Student portals
  • Admin dashboards
  • E-commerce websites
  • Blogging websites
  • Portfolio websites
  • Full stack applications

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is React Router?

👉 React Router is a library used for navigation in React applications.

Q2. Why do we use BrowserRouter?

👉 It enables routing in the entire React application.

Q3. What is the difference between Link and <a> tag?

👉 Link avoids full page reload, while <a> reloads the page.

Q4. What is Route in React Router?

👉 It defines which component should be displayed for a given path.

Q5. What is Routes used for?

👉 It groups all route definitions.

Q6. What is the purpose of path="*"?

👉 It handles invalid URLs and displays a fallback page.

Q7. What is a single-page application?

👉 An application where navigation happens without full page reload.

Q8. Can React Router be used in real projects?

👉 Yes, it is widely used in professional React applications.

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 Angular Pipes Example – Program 26
👉 React Login Form Validation – Program 19
👉 React Todo List App – Program 18

📌 CONCLUSION

React Router is one of the most essential tools in React development. It helps create clean, structured, and user-friendly applications with multiple pages.

👉 Practice navigation with 3 pages first, then move to nested routes and route parameters for advanced React projects.

Further Reading

JUnit Tutorial

How to Master Full Stack Development?

Spring Framework Practice Problems and Their Solutions

30 MCQs on JUnit

From Google to the World: The Story of Go Programming Language

Why Go? Understanding the Advantages of this Emerging Language

Creating and Executing Simple Programs in Go

20+ Interview Questions on Go Programming Language

100+ MCQs On Java Architecture

Java Practice Exercise

programmingempire

Princites

You may also like...

React

How to Create a To Do List App Using React?
React

React Redux Counter App (Step-by-Step Example)
React

React Change Background Color using useState Hook (Button Click Example)

Leave a Reply

Your email address will not be published. Required fields are marked *