When I first started working with React Router, I remember feeling a bit overwhelmed by how navigation worked in single-page applications. Coming from a strong Python background, I was used to frameworks like Flask or Django, where routing happens on the server. But in React, it’s all handled on the client side, and that’s where the Route component comes in.
Over the years, I’ve built several React-based dashboards and internal tools for U.S. clients, and the Route component has always been at the heart of these projects. In this tutorial, I’ll walk you through what the Route component does, how to use it effectively, and how to handle dynamic and nested routes like a pro.
What is the Route Component in React Router?
The Route component is part of the React Router library, a powerful tool that helps you manage navigation in React applications without reloading the page.
Think of it as a “traffic controller” that decides which component should be displayed based on the current URL path. When the path in the browser matches the one you specify in the Route, React Router renders the corresponding component.
Here’s a simple example:
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}
export default App;In this example, when a user visits /, the Home component renders. When they navigate to /about, the About component takes over, all without a page refresh.
Set Up React Router
If you haven’t installed React Router yet, you can do so using npm or yarn:
npm install react-router-domor
yarn add react-router-domOnce installed, wrap your entire app inside the <BrowserRouter> (often renamed as Router for convenience). This enables routing capabilities across your React application.
Method 1 – Basic Route Setup
When I first started using React Router, I kept things simple, just a few static routes for pages like Home, About, and Contact.
Here’s how I usually set that up:
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
function Home() {
return <h2>Welcome to Our U.S. Dashboard</h2>;
}
function About() {
return <h2>About Our Company</h2>;
}
function Contact() {
return <h2>Contact Us (U.S. Office)</h2>;
}
export default function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link> |{" "}
<Link to="/about">About</Link> |{" "}
<Link to="/contact">Contact</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
}I executed the above example code and added the screenshot below.
This is the simple way to use the Route component. Each path corresponds to a specific page, and React Router ensures that only the correct component renders for that URL.
Method 2 – Dynamic Routes (Route Parameters)
In real-world U.S. applications, you often need to display data based on a parameter, for example, showing a user’s profile page or a specific product.
Here’s how you can use route parameters with the Route component:
import React from "react";
import { BrowserRouter as Router, Routes, Route, useParams, Link } from "react-router-dom";
function UserProfile() {
const { id } = useParams();
return <h2>User Profile for ID: {id}</h2>;
}
function App() {
return (
<Router>
<nav>
<Link to="/user/101">User 101</Link> |{" "}
<Link to="/user/202">User 202</Link>
</nav>
<Routes>
<Route path="/user/:id" element={<UserProfile />} />
</Routes>
</Router>
);
}
export default App;I executed the above example code and added the screenshot below.
Now, when you navigate to /user/101, it displays “User Profile for ID: 101.” The useParams() hook helps extract the route parameter from the URL.
This method is perfect for dynamic pages like user profiles, product details, or even state-specific dashboards (e.g., /dashboard/california).
Method 3 – Nested Routes
As your application grows, you’ll likely have sections that contain subpages. For example, an admin dashboard might have nested routes for “Users,” “Reports,” and “Settings.”
Here’s how I typically structure nested routes:
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link, Outlet } from "react-router-dom";
function Dashboard() {
return (
<div>
<h2>Admin Dashboard</h2>
<nav>
<Link to="users">Users</Link> |{" "}
<Link to="reports">Reports</Link> |{" "}
<Link to="settings">Settings</Link>
</nav>
<Outlet />
</div>
);
}
function Users() {
return <h3>Manage Users</h3>;
}
function Reports() {
return <h3>View Reports</h3>;
}
function Settings() {
return <h3>Dashboard Settings</h3>;
}
function App() {
return (
<Router>
<Routes>
<Route path="/dashboard" element={<Dashboard />}>
<Route path="users" element={<Users />} />
<Route path="reports" element={<Reports />} />
<Route path="settings" element={<Settings />} />
</Route>
</Routes>
</Router>
);
}
export default App;I executed the above example code and added the screenshot below.
Here, the <Outlet /> component acts as a placeholder for the nested route components. This keeps your layout consistent while switching between subpages.
Method 4 – Handle 404 (Not Found) Routes
A professional U.S.-based web application should always handle invalid URLs gracefully. You can create a catch-all route using the * path.
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function Home() {
return <h2>Home Page</h2>;
}
function NotFound() {
return <h2>404 – Page Not Found</h2>;
}
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
);
}
export default App;I executed the above example code and added the screenshot below.
This ensures your users always get a friendly message, rather than a blank screen, if they navigate to an undefined route.
Method 5 – Redirect with Navigate
Sometimes, you’ll want to redirect users automatically. For example, if someone tries to access a restricted page without logging in.
React Router’s Navigate component makes this simple:
import React from "react";
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
function Login() {
return <h2>Please log in to continue</h2>;
}
function Dashboard() {
const isLoggedIn = false; // Example condition
return isLoggedIn ? <h2>Welcome to the Dashboard</h2> : <Navigate to="/login" />;
}
function App() {
return (
<Router>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</Router>
);
}
export default App;When users visit /dashboard without being logged in, they’re redirected to /login. This is a clean and efficient way to handle authentication routes.
Key Takeaways
- The Route component determines which component to render based on the URL path.
- Use dynamic routes for pages that depend on parameters (like /user/:id).
- Nested routes keep your layouts consistent and organized.
- Always include a 404 route for a better user experience.
- Use Navigate for redirects and access control.
When I first learned React Router, the Route component felt like a small piece of a big puzzle. But once I understood how it worked, everything else, links, navigation, and layout, started to make sense. Whether you’re building a small portfolio site or a large U.S.-based enterprise dashboard, mastering the Route component will make your React apps more dynamic and user-friendly.
You may also like to read:
- Create Masonry Layout in React Using react-masonry-component
- Dynamically Render Components in React
- How to Handle React Component Unmount
- Fetch and Display Data from an API in React
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.
