Every serious React application needs routing.
Whether you're building a SaaS dashboard, an eCommerce platform, or a portfolio site, users must navigate between pages smoothly without full-page reloads. That’s where React Router v6 comes in.
React Router enables client-side routing, making your applications feel fast and seamless. But many developers only understand the basics — and miss the powerful features that make apps scalable and production-ready.
In this complete guide, you’ll learn:
-
How React Router v6 works
-
How to create dynamic and nested routes
-
How to build protected (private) routes
-
Best practices for scalable routing architecture
If you're serious about becoming a professional React developer, mastering routing is non-negotiable.
What is React Router?
React Router is a standard routing library for React applications. It allows you to:
-
Navigate between components
-
Create dynamic URLs
-
Manage nested layouts
-
Control access to certain routes
React Router v6 introduced significant improvements over previous versions, including:
-
Simplified route configuration
-
Improved nested routing
-
Cleaner API
-
Better performance
Understanding v6 is essential for modern React development.
Setting Up React Router v6
First, install it:
Basic setup:
import Home from "./Home";
import About from "./About";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
Key changes in v6:
-
Switchis replaced withRoutes -
componentis replaced withelement -
Routing is more intuitive and declarative
Dynamic Routing with URL Parameters
Dynamic routes allow you to create flexible URLs.
Example:
Inside the component:
function UserProfile() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}
This is crucial for:
-
Product pages
-
User dashboards
-
Blog posts
-
Dynamic content
Dynamic routing makes applications scalable and data-driven.
Nested Routes (Scalable Layouts)
Large applications require nested layouts.
Example structure:
├── Analytics
├── Settings
└── Profile
React Router v6 makes nested routing clean:
<Route path="analytics" element={<Analytics />} />
<Route path="settings" element={<Settings />} />
</Route>
Inside Dashboard:
function Dashboard() {
return (
<div>
<Sidebar />
<Outlet />
</div>
);
}
Outlet renders the nested route component.
This approach is ideal for:
-
Admin panels
-
SaaS dashboards
-
Multi-section applications
Protected Routes (Private Pages)
Many applications require authentication-based routing.
Example: Only logged-in users can access /dashboard.
Create a protected route wrapper:
function ProtectedRoute({ children }) {
const isAuthenticated = true; // Replace with real auth logic
if (!isAuthenticated) {
return <Navigate to="/login" />;
}
return children;
}
Usage:
path="/dashboard"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>
This pattern is essential for:
-
Membership platforms
-
SaaS applications
-
Secure admin panels
Programmatic Navigation
React Router provides the useNavigate hook:
function Login() {
const navigate = useNavigate();
const handleLogin = () => {
// login logic
navigate("/dashboard");
};
return <button onClick={handleLogin}>Login</button>;
}
This allows navigation after:
-
Form submission
-
Authentication
-
API responses
-
Conditional logic
Handling 404 Pages
Every professional app needs a fallback route.
This ensures unmatched routes show a proper 404 page instead of a blank screen.
Best Practices for Scalable Routing Architecture
1. Separate Route Configuration
Instead of cluttering App.js, create a dedicated routes file.
2. Use Layout Components
Create reusable layouts for:
-
Public pages
-
Dashboard pages
-
Auth pages
3. Lazy Load Routes
For performance:
This improves initial load speed.
4. Keep Routing Declarative
Avoid overly complex conditional logic inside routes. Use wrapper components instead.
Common Mistakes Developers Make
-
Not using nested routes properly
-
Mixing routing logic with business logic
-
Forgetting fallback routes
-
Hardcoding navigation paths everywhere
-
Ignoring performance optimization
Routing is architectural — treat it like one.
Real-World Example: SaaS Application Structure
A scalable SaaS app might look like:
├── Home
├── Pricing
├── Login
├── Register
└── /dashboard
├── Overview
├── Billing
├── Settings
Using:
-
Nested routes
-
Protected routes
-
Lazy loading
-
Shared layouts
This is how production-grade React apps are structured.
Why Mastering React Router Boosts Your Career
Companies expect developers to:
-
Build multi-page applications
-
Implement authentication flows
-
Structure scalable dashboards
-
Manage complex layouts
Understanding routing deeply shows that you:
-
Think architecturally
-
Understand application structure
-
Can build production-ready systems
This is not beginner knowledge — this is professional-level React engineering.
