React Router Setup: Complete Guide

React Router DOM is the standard routing library for React applications. It enables client-side routing, allowing navigation without page refreshes. In this guide, we'll set up React Router with routes, protected routes, and nested layouts for an inventory management system.

Installation

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 { Provider } from "react-redux";
import { store } from "./state/store";
import Login from "./pages/Auth/Login";
import Signup from "./pages/Auth/Signup";
import DashboardLayout from "./components/DashboardLayout";
import Home from "./pages/Home";
import Products from "./pages/Products/Products";
import AddProduct from "./pages/Products/AddProduct";
import EditProduct from "./pages/Products/EditProduct";

function App() {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <Routes>
          {/* Public routes */}
          <Route path="/login" element={<Login />} />
          <Route path="/signup" element={<Signup />} />
          
          {/* Protected routes with layout */}
          <Route element={<DashboardLayout />}>
            <Route path="/" element={<Home />} />
            <Route path="/products" element={<Products />} />
            <Route path="/products/add" element={<AddProduct />} />
            <Route path="/products/edit/:id" element={<EditProduct />} />
          </Route>
          
          {/* 404 route */}
          <Route path="*" element={<div>404 - Page Not Found</div>} />
        </Routes>
      </BrowserRouter>
    </Provider>
  );
}

export default App;

Using Outlet for Nested Routes

Creating a layout component with Outlet:

import { Outlet, useNavigate } from "react-router-dom";
import SideBar from "./SideBar";
import MainContent from "./MainContent";

export default function DashboardLayout() {
  const [pageTitle, setPageTitle] = useState("");
  const navigate = useNavigate();
  
  const context = {
    setPageTitle,
  };

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

Navigation in Components

Using useNavigate for programmatic navigation:

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);
  };

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

  return (
    <div>
      <button onClick={handleAdd}>Add Product</button>
      <button onClick={() => handleEdit("123")}>Edit Product</button>
      <button onClick={handleBack}>Back</button>
    </div>
  );
}

// Using route parameters
function EditProduct() {
  const { id } = useParams<{ id: string }>();
  
  return <div>Editing product: {id}</div>;
}

Using Link Component

Creating navigation links:

import { Link, NavLink } from "react-router-dom";

function SideBar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/products">Products</Link>
      <Link to="/categories">Categories</Link>
      
      {/* Active link styling */}
      <NavLink
        to="/products"
        className={({ isActive }) =>
          isActive ? "active-link" : "inactive-link"
        }
      >
        Products
      </NavLink>
    </nav>
  );
}

Protected Routes

Implementing route protection:

import { Navigate, Outlet } from "react-router-dom";
import { useSelector } from "react-redux";

function ProtectedRoute() {
  const isAuthenticated = useSelector((state: RootState) => state.auth.isAuthenticated);
  
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  
  return <Outlet />;
}

// Usage
<Route element={<ProtectedRoute />}>
  <Route path="/products" element={<Products />} />
  <Route path="/categories" element={<Categories />} />
</Route>

Best Practices

• Use BrowserRouter for client-side routing
• Organize routes by feature or module
• Use Outlet for nested layouts
• Implement protected routes for authentication
• Use NavLink for active link styling
• Handle 404 routes properly
• Use route parameters for dynamic routes

Conclusion

React Router DOM provides powerful routing capabilities for React applications. With nested routes, protected routes, and programmatic navigation, you can create complex navigation structures for inventory management systems and other React applications.