React Router Setup: Complete Guide for React Applications

When I first started building React applications, I thought routing would be simple. Just show different components based on the URL, right? Then I had to implement protected routes, nested layouts, route parameters, and handle 404 pages. That's when I realized that proper routing setup is crucial for building maintainable React applications.

React Router DOM is the de facto standard for routing in React applications. It enables client-side routing, which means navigation happens without full page refreshes—your app feels fast and responsive. But more importantly, it provides a declarative way to define your application's routes, handle navigation, and protect routes based on authentication status.

What is React Router?

React Router DOM is a routing library for React that provides:

• Client-side routing - Navigation without page refreshes
• Declarative routes - Define routes using JSX
• Nested routes - Organize routes hierarchically
• Protected routes - Control access based on authentication
• Route parameters - Dynamic routes like /products/:id
• Query parameters - Handle URL search params
• Programmatic navigation - Navigate from code

Installation

Install React Router DOM:

npm install react-router-dom

Basic Router Setup

Setting up the router in your main app:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from "./pages/Auth/Login";
import DashboardLayout from "./components/DashboardLayout";
import Home from "./pages/Home";
import Products from "./pages/Products/Products";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route element={<DashboardLayout />}>
          <Route path="/" element={<Home />} />
          <Route path="/products" element={<Products />} />
        </Route>
        <Route path="*" element={<div>404 - Page Not Found</div>} />
      </Routes>
    </BrowserRouter>
  );
}

Using Outlet for Nested Routes

Creating a layout component with Outlet:

import { Outlet, useNavigate } from "react-router-dom";

export default function DashboardLayout() {
  const navigate = useNavigate();

  return (
    <div className="min-h-screen bg-gray-100">
      <div className="flex">
        <SideBar />
        <MainContent>
          <Outlet />
        </MainContent>
      </div>
    </div>
  );
}

Navigation in Components

Programmatic navigation using the useNavigate hook:

import { useNavigate, useParams } from "react-router-dom";

function Products() {
  const navigate = useNavigate();

  const handleAdd = () => {
    navigate("/products/add");
  };

  const handleEdit = (id: string) => {
    navigate(`/products/edit/${id}`);
  };
}

Route Parameters

Access route parameters:

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

function EditProduct() {
  const { id } = useParams<{ id: string }>();

  return <div>Editing product {id}</div>;
}

Best Practices

1. Use BrowserRouter for client-side routing
2. Organize routes with nested layouts
3. Protect routes with authentication
4. Handle 404 with wildcard routes
5. Use Outlet for nested routes
6. Type route parameters properly

📖 Read the Complete Guide

This is just a brief overview! The complete guide on my blog includes:

• ✅ Protected Routes - Authentication-based route protection
• ✅ Route Parameters - Dynamic routes and URL params
• ✅ Query Parameters - Handling search params
• ✅ Navigation Methods - useNavigate, Link, NavLink
• ✅ Route Guards - Protecting routes with components
• ✅ Nested Routes - Complex route hierarchies
• ✅ Real-world examples from production applications

👉 Read the full article with all code examples here

What's your experience with React Router? Share your tips in the comments! 🚀

For more React guides, check out my blog covering TypeScript, React Hook Form, Redux Toolkit, and more.