React Router Routes and Route

Introduction

ReactJS is widely used for building modern Single Page Applications (SPA). In a traditional website, clicking a link reloads the entire webpage. However, React applications dynamically update content without refreshing the browser.

To manage navigation between different pages in React applications, developers use React Router.

Two of the most important components in React Router are:

• Routes
• Route

These components help developers define URLs and display the correct components based on the current route.

What are Routes in React Router?

Routes is a container component introduced in React Router Version 6.

It is used to wrap multiple Route components and render the best-matching route.

Example

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

The Routes component checks the current URL and renders the matching Route.

What is Route in React Router?

Route is used to define:

• URL path
• Component to display

Each Route maps a URL to a React component.

Example

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

In this example:

• /about is the URL path
• <About /> is the component rendered

Why Routes and Route are Used?

React applications often contain multiple pages.

Examples:

• Home
• About
• Contact
• Login
• Dashboard

Without routing, switching between pages would be difficult.

Installing React Router

Before using Routes and Route, install React Router.

npm install react-router-dom

Basic Example of Routes and Route

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 Routes

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 the Syntax

BrowserRouter

<BrowserRouter>

This enables routing functionality.

Routes

<Routes>

This groups all routes together.

Route

<Routes>

Important Props

How Routes Works?

When a user visits a URL:

• React Router checks all Route paths inside Routes
• The matching route is rendered
• Other routes are ignored

Example:

/about

React Router renders:

<About />

Multiple Routes Example

<Routes>
 <Route path="/" element={<Home />} />
 <Route path="/services" element={<Services />} />
 <Route path="/blog" element={<Blog />} />
 <Route path="/contact" element={<Contact />} />
</Routes>

This creates four different pages.

Dynamic Routes in React Router

Dynamic routes allow URLs with parameters.
Example

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

Here:

• :id is a dynamic parameter

Example URLs:

/user/1

/user/25

/user/100

Accessing Route Parameters

React Router provides useParams() hook.

Example

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

Nested Routes

Nested routes allow routes inside parent routes.

Useful for:

• Dashboards
• Admin panels
• Settings pages

Nested Route Example

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

Using Outlet for Nested Routes

The Outlet component renders child routes.

Example

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

Index Route

An index route is the default child route.

Example

<Route path="/dashboard" element={<Dashboard />}>
 <Route
   index
   element={<Welcome />}
 />
</Route>

When users visit /dashboard, the Welcome component appears.

404 Not Found Route

A wildcard route handles invalid URLs

Example

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

If no route matches, the NotFound component displays.

Real-Life Example of Routes and Route

E-Commerce Website

Routes:

/home

/products

/products/5

/cart

/login

/profile

Corresponding Routes:

<Routes>
 <Route path="/" element={<Home />} />
 <Route path="/products" element={<Products />} />
 <Route
   path="/products/:id"
   element={<ProductDetails />}
 />
 <Route path="/cart" element={<Cart />} />
</Routes>

This structure helps users navigate easily.

React Router Version 6 Changes

React Router v6 introduced important changes.

Routes vs Route

Advantages of Using Routes and Route

1. Faster Navigation

Pages load without refreshing.

2. Better User Experience

Applications feel smoother.

3. Dynamic Routing

Supports URL parameters.

4. Organized Code

Routes stay structured and manageable.

5. Nested Layout Support

Useful for complex applications.

Common Mistakes

1. Forgetting BrowserRouter

Wrong:

<Routes>

Correct:

<BrowserRouter>

2. Using component Instead of element

Wrong:

<Route
 path="/"
 component={Home}
/>

Correct:

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

3. Forgetting JSX Inside element

Wrong:

element={Home}

Correct:

element={<Home />}

4. Missing Outlet in Nested Routes

Without Outlet, child routes will not render.

5. Incorrect Route Paths

Wrong:

path="about"

Correct:

path="/about"

Best Practices

Keep Routes Organized

Store routes in separate files for large projects.

Use Meaningful Paths

Good:

/profile

/orders

/settings

Bad:

/p1

/o1

/s1

Use Lazy Loading

Improve performance using React lazy loading.

Create Protected Routes

Restrict access to authenticated users.

Use Nested Layouts Properly

Helps maintain clean structure.

Conclusion

Routes and Route are the foundation of navigation in React applications.

They help developers:

• Create multiple pages
• Handle dynamic URLs
• Build Single Page Applications
• Improve user experience
• Organize navigation cleanly.

Modern React applications heavily depend on React Router for routing functionality.

Continue Learning React