React Router Introduction

Introduction

React applications are usually Single Page Applications (SPA), where content changes dynamically without refreshing the page.

To handle navigation between different pages in a React application, developers use React Router.

React Router is a powerful routing library that allows developers to create multiple pages and navigation systems in React applications while keeping the user experience fast and smooth.

What is React Router?

React Router is a library used for handling navigation and routing in React applications.

It enables developers to:

• Navigate between pages
• Create dynamic routes
• Handle URLs
• Build Single Page Applications (SPA)

React Router works without reloading the webpage, making applications faster and smoother.

Why React Router is Used?

React Router is important because React itself does not include built-in routing functionality.

Benefits of React Router

1. Single Page Navigation

Pages change without full-page reloads.

2. Better User Experience

Navigation becomes fast and smooth.

3. Dynamic Routing

URLs can contain dynamic values such as user IDs.

4. Nested Routing

Developers can create layouts with child routes.

5. URL Management

Each page gets its own URL.

6. Component-Based Routing

Routes are handled using React components.

Installation of React Router

To use React Router, install the package using npm.

npm install react-router-dom

Basic Folder Structure

Example project structure:

src/
├── App.js
├── Home.js
├── About.js
├── Contact.js

Basic Routing Example

Step 1: Create Components

Home.js

function Home() {
 return <h1>Home Page</h1>;
}
export default Home;

About.js

function About() {
 return <h1>About Page</h1>;
}
export default About;

Contact.js

function Contact() {
 return <h1>Contact Page</h1>;
}
export default Contact;

Step 2: Configure Routing

App.js

import {
 BrowserRouter,
 Routes,
 Route
} from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
function App() {
 return (
   <BrowserRouter>
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="/about" element={<About />} />
       <Route path="/contact" element={<Contact />} />
     </Routes>
   </BrowserRouter>
 );
}
export default App;

Understanding Important Components

1. BrowserRouter

BrowserRouter wraps the entire application and enables routing.

<BrowserRouter>

2. Routes

Routes are used to contain multiple routes.

<Routes>

3. Route

Route defines a path and component.

<Route path="/about" element={<About />} />

Creating Navigation Links

React Router provides the Link component for navigation.

Example

import { Link } from "react-router-dom";
function Navbar() {
 return (
   <div>
     <Link to="/">Home</Link>
     <Link to="/about">About</Link>
     <Link to="/contact">Contact</Link>
   </div>
 );
}
export default Navbar;

Why Use a Link Instead of an Anchor Tag?

Wrong:

<a href="/about">About</a>

Correct:

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

Reason

Anchor tags reload the entire page, while Link changes the route without reloading.

Route Parameters in React Router

Route parameters are used for dynamic URLs.

Example

<Route path="/user/:id" element={<User />} />

Note: :id is a dynamic parameter.

Accessing Route Parameters

React Router provides the useParams() hook.

Example

import { useParams } from "react-router-dom";
function User() {
 const { id } = useParams();
 return <h1>User ID: {id}</h1>;
}
export default User;

Programmatic Navigation

React Router provides useNavigate() hook.

Example

import { useNavigate } from "react-router-dom";
function Home() {
 const navigate = useNavigate();
 const goToAbout = () => {
   navigate("/about");
 };
 return (
   <button onClick={goToAbout}>
     Go to About
   </button>
 );
}
export default Home;

Nested Routes in React Router

Nested routes allow child pages inside parent layouts.

Example

<Routes>
 <Route path="/dashboard" element={<Dashboard />}>
   <Route path="profile" element={<Profile />} />
   <Route path="settings" element={<Settings />} />
 </Route>
</Routes>

Using Outlet Component

Outlet renders child routes.

Example

import { Outlet } from "react-router-dom";
function Dashboard() {
 return (
   <div>
     <h1>Dashboard</h1>
     <Outlet />
   </div>
 );
export default Dashboard;

404 Page in React Router

You can create a page for invalid URLs.

Example

<Route path="*" element={<NotFound />} />

Real-Life Example of React Router

Imagine an e-commerce website.

Pages

• Home
• Products
• Product Details
• Cart
• Login
• Dashboard

Each page has a unique route.

Example

/products

/products/5

/cart

/login

/dashboard

React Router helps users move between these pages without refreshing the site.

React Router Version 6 Features

React Router v6 introduced many improvements.

Important Features

Feature	Description
Routes	Replaces Switch
element	Replaces component prop
useNavigate	Replaces useHistory
Better Performance	Faster routing
Nested Routes	Simpler implementation

React Router vs Traditional Routing

Feature	Traditional Website	React Router
Page Reload	Yes	No
Speed	Slower	Faster
User Experience	Basic	Smooth
Navigation	Server-side	Client-side
SPA Support	No	Yes

Advantages of React Router

1. Fast Navigation

Pages change instantly.

2. Better Performance

No full-page reloads.

3. Easy URL Handling

Supports dynamic URLs.

4. Nested Layouts

Useful for dashboards and admin panels.

5. Cleaner Code Structure

Routing stays organized.

Common Mistakes in React Router

1. Forgetting BrowserRouter

Wrong:

<Routes>

Correct:

<BrowserRouter>

2. Using href Instead of Link

Wrong:

<a href="/about">About</a>

Correct:

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

3. Incorrect Route Path

Wrong:

<Route path="about" />

Correct:

<Route path="/about" />

4. Forgetting Outlet in Nested Routes

Without Outlet, child routes will not render.

5. Importing from Wrong Package

Wrong:

import { Route } from "react-router";

Correct:

import { Route } from "react-router-dom";

Best Practices

Use Separate Route Files

Large applications should store routes separately.

Keep Route Names Meaningfu

Good:

/profile

/settings

Bad:

/p1

/p2

Use Lazy Loading

Improve performance using React lazy loading.

Protect Private Routes

Authentication-based pages should be protected.

Use Nested Layouts Properly

Makes dashboard applications cleaner.

React Router – Interview Questions

React Router – Objective Questions (MCQs)

Conclusion

React Router is an essential library for building modern React applications. It enables developers to create fast, dynamic, and user-friendly navigation systems.

With React Router, developers can:

• Create multiple pages
• Handle dynamic routes
• Build nested layouts
• Navigate programmatically
• Improve user experience

Continue Learning React