Routing is the backbone of any modern web application. If you have been working with React for a while, you know that managing how users move between pages can get tricky.
I have spent over eight years building React applications, and I can tell you that getting your routing right from the start saves a lot of headaches later.
In this tutorial, I will show you exactly how to work with the Route component in React Router DOM. We will move past the basic “Hello World” examples and look at how this works in real-world scenarios.
Whether you are building a dashboard for a logistics company in Chicago or a retail site for a shop in New York, these concepts will apply.
The Route Component
At its core, the Route component is responsible for rendering a specific piece of the UI when the app’s location matches a certain path.
Think of it as a conditional statement that says: “If the URL looks like this, then show this component.”
In the latest versions of React Router (v6+), the way we define routes has become much cleaner and more intuitive compared to the earlier days.
Set Up Your React Project
Before we dive into the code, you need to have the react-router-dom package installed in your project.
You can do this by running the following command in your terminal:
npm install react-router-domOnce that is done, we can start building our navigation structure.
Method 1: Basic Route Implementation
The most common way to use the Route component is within a Routes container. This is the standard approach for most American e-commerce or SaaS platforms.
In this example, let’s build a simple navigation for a US-based Travel Agency.
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
// Components for our pages
const Home = () => (
<div style={{ padding: '20px' }}>
<h1>Welcome to American Vistas Travel</h1>
<p>Explore the beauty of National Parks from Yellowstone to the Everglades.</p>
</div>
);
const Destinations = () => (
<div style={{ padding: '20px' }}>
<h1>Popular US Destinations</h1>
<ul>
<li>Grand Canyon, Arizona</li>
<li>Maui, Hawaii</li>
<li>New York City, New York</li>
</ul>
</div>
);
const Contact = () => (
<div style={{ padding: '20px' }}>
<h1>Contact Our Boston Office</h1>
<p>Call us at (617) 555-0123 for personalized trip planning.</p>
</div>
);
export default function App() {
return (
<Router>
<nav style={{ padding: '10px', background: '#f4f4f4' }}>
<Link to="/" style={{ margin: '10px' }}>Home</Link>
<Link to="/destinations" style={{ margin: '10px' }}>Destinations</Link>
<Link to="/contact" style={{ margin: '10px' }}>Contact</Link>
</nav>
<Routes>
{/* Defining the Route components */}
<Route path="/" element={<Home />} />
<Route path="/destinations" element={<Destinations />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
}You can refer to the screenshot below to see the output.
In this setup, the path prop defines the URL segment, and the element prop takes the React component you want to display.
I prefer this method because it is very readable. Even if you have fifty routes, you can see exactly where each one leads.
Method 2: Handle Dynamic Routes with URL Parameters
Often, you don’t just have static pages. You might have thousands of products or blog posts.
Instead of creating a route for every single item, we use dynamic segments. Let’s look at a “State Park” directory example.
import React from 'react';
import { BrowserRouter as Router, Routes, Route, useParams, Link } from 'react-router-dom';
const ParkDetail = () => {
// useParams hooks grabs the dynamic part of the URL
let { parkName } = useParams();
return (
<div style={{ padding: '20px' }}>
<h1>Exploring {parkName.replace('-', ' ')}</h1>
<p>This page provides specific details about {parkName} located in the United States.</p>
<Link to="/parks">Back to Directory</Link>
</div>
);
};
const ParkList = () => (
<div style={{ padding: '20px' }}>
<h1>US National Parks Directory</h1>
<ul>
<li><Link to="/parks/Yellowstone">Yellowstone</Link></li>
<li><Link to="/parks/Yosemite">Yosemite</Link></li>
<li><Link to="/parks/Zion">Zion</Link></li>
</ul>
</div>
);
export default function App() {
return (
<Router>
<Routes>
<Route path="/parks" element={<ParkList />} />
{/* The colon signifies a dynamic parameter */}
<Route path="/parks/:parkName" element={<ParkDetail />} />
</Routes>
</Router>
);
}You can refer to the screenshot below to see the output.
Using :parkName allows the route to match any value after /parks/.
I find this essential for SEO-friendly URLs. It looks much better to have /parks/yellowstone than a messy query string like ?id=102.
Method 3: Use Nested Routes for Complex Layouts
If you are building an admin dashboard or a user settings page, you likely have a persistent sidebar or header.
Nested routes allow you to swap out only a portion of the screen while keeping the rest of the layout intact.
Let’s imagine a “US Tax Dashboard” where the sidebar stays put while the content changes.
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, Outlet } from 'react-router-dom';
const DashboardLayout = () => {
return (
<div style={{ display: 'flex' }}>
<aside style={{ width: '200px', background: '#2c3e50', color: 'white', height: '100vh', padding: '20px' }}>
<h3>Tax Portal</h3>
<nav>
<ul style={{ listStyle: 'none', padding: 0 }}>
<li><Link to="filing" style={{ color: 'white' }}>Federal Filing</Link></li>
<li><Link to="refunds" style={{ color: 'white' }}>Refund Status</Link></li>
<li><Link to="documents" style={{ color: 'white' }}>W-2 Forms</Link></li>
</ul>
</nav>
</aside>
<main style={{ flex: 1, padding: '20px' }}>
{/* The Outlet component is where the child route renders */}
<Outlet />
</main>
</div>
);
};
const FederalFiling = () => <h2>Your 2025 Federal Tax Return</h2>;
const RefundStatus = () => <h2>Track Your IRS Refund</h2>;
const Documents = () => <h2>Your Tax Documents (USA)</h2>;
export default function App() {
return (
<Router>
<Routes>
<Route path="/dashboard" element={<DashboardLayout />}>
{/* These are nested routes */}
<Route path="filing" element={<FederalFiling />} />
<Route path="refunds" element={<RefundStatus />} />
<Route path="documents" element={<Documents />} />
</Route>
</Routes>
</Router>
);
}You can refer to the screenshot below to see the output.
The Outlet component is the key here. It tells React Router where to “plug in” the sub-pages.
This is my go-to pattern for large-scale enterprise applications in the US. It keeps the code modular and easy to maintain.
Handle 404 Pages (The “Catch-All” Route)
Users often mistype URLs or follow broken links. You want to make sure they don’t see a blank white screen.
In React Router, we can create a “No Match” route using an asterisk (*).
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
const NotFound = () => (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>404 - Page Not Found</h1>
<p>Sorry, the page you are looking for doesn't exist in our US directory.</p>
<Link to="/">Return to Home</Link>
</div>
);
export default function App() {
return (
<Router>
<Routes>
<Route path="/" element={<h2>Home Page</h2>} />
{/* This will catch any URL that doesn't match the ones above */}
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
);
}I always place the * route at the very bottom of my Routes list. It serves as a safety net for your application.
Protected Routes for Authentication
In many American apps, like banking or healthcare portals, you need to ensure a user is logged in before they see certain data.
You can wrap your Route components in a custom protection component.
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
// Simple mock for authentication status
const isAuthenticated = false;
const ProtectedRoute = ({ children }) => {
if (!isAuthenticated) {
// Redirect to login if not authenticated
return <Navigate to="/login" replace />;
}
return children;
};
const SecureData = () => <h2>Sensitive Social Security Information</h2>;
const Login = () => <h2>Please Login to Access US Records</h2>;
export default function App() {
return (
<Router>
<Routes>
<Route path="/login" element={<Login />} />
<Route
path="/secure"
element={
<ProtectedRoute>
<SecureData />
</ProtectedRoute>
}
/>
</Routes>
</Router>
);
}This pattern ensures that unauthorized users never even see the component tree for protected data. It is a clean way to handle security logic.
Summary of Props for the Route Component
Over the years, I have found that you really only need to master a few props to be successful with the Route component:
- path: The URL pattern to match.
- element: The component to render when the path matches.
- index: Used for a default route within a nested structure.
- caseSensitive: Useful if you want /Home and /home to be treated differently (though I usually stick to lowercase).
Building a robust navigation system is one of the most rewarding parts of React development. When your routes work smoothly, the whole user experience feels much more professional.
I hope you found this guide helpful. Understanding the nuances of the Route component will definitely make you a more confident developer.
You may read:
- How to Create and Publish a React Component Library
- React Component Key Prop
- React Checkbox Component
- React Functional Component Type
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
