React Router Complete Guide – Basic Routing to Advanced Features

In this blog post, we'll take a complete tour of React Router, the most powerful routing library in React applications. Whether you are just starting or want to master advanced navigation techniques in SPAs, this guide has you covered.

What You'll Learn

• Installing and setting up React Router
• Basic route declaration using array structure
• Handling 404 Not Found routes
• Working with URL Parameters (declaring, passing, and retrieving)
• Implementing Protected Routes
• Understanding exact matching (React Router v5)
• Building nested layouts using <Outlet />
• Using the <Link /> component for navigation
• Performing redirects (with and without passing data)
• Accessing the current location using useLocation()

By the end of this tutorial, you'll be able to confidently structure your application's navigation using React Router v6.

Introduction

React Router is the official routing library for React applications. It allows developers to manage navigation, route matching, and URL parameters in single-page applications (SPA). In this guide, we’ll explore core features of React Router including route arrays, 404 pages, dynamic params, protected routes, layout building, and more.

Why Use React Router?

React Router helps build seamless and fast navigation in SPAs without page reloads. It enables dynamic routing, nested layouts, and access control in a clean and modular way. It’s an essential library for any modern React application.

Steps

01: Install React Router

Use the following command to install React Router in your project:

npm install react-router-dom

02: Basic Routing (Using Array of Routes)

Create a routes array and render them using <useRoutes />:

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

const routes = [
  { path: "/", element: <Home /> },
  { path: "/about", element: <About /> },
];

export default function App() {
  const element = useRoutes(routes);
  return element;
}
    

03: 404 Not Found Route

Use a catch-all route with path="*" to handle 404 pages.

{ path: "*", element: <NotFound /> }
    

04: Params — Declaring, Passing, Getting

Declaring param route:

{ path: "/user/:id", element: <UserProfile /> }

Linking with param:

<Link to="/user/42">User 42</Link>

Getting param in component:

import { useParams } from "react-router-dom";
const { id } = useParams();
    

05: Protected Routes

Wrap routes in a component that checks auth state:

function ProtectedRoute({ children }) {
  const isAuthenticated = true; // replace with actual auth logic
  return isAuthenticated ? children : <Navigate to="/login" />;
}
    

Use in route:

{
  path: "/dashboard",
  element: <ProtectedRoute><Dashboard /></ProtectedRoute>
}
    

06: exact (for v5 only)

In React Router v5, use exact to match a route exactly. In v6, all routes are matched exactly by default.

07: Building Layout with Outlet

Use nested routes and the <Outlet /> component for layouts:

const routes = [
  {
    path: "/",
    element: <MainLayout />,
    children: [
      { path: "", element: <Home /> },
      { path: "about", element: <About /> },
    ]
  }
];

// MainLayout.jsx
function MainLayout() {
  return (
    <>
      <Navbar />
      <Outlet />
      <Footer />
    </>
  );
}
    

08: Link Navigation

Use the <Link /> component for client-side navigation:

<Link to="/about">About Us</Link>

09: Redirect (With and Without Data)

Without data:

<Navigate to="/login" />

With state:

<Navigate to="/login" state={{ from: "/dashboard" }} />
    

Getting state in target component:

import { useLocation } from "react-router-dom";
const location = useLocation();
console.log(location.state?.from); // "/dashboard"
    

10: Current Location Info

Use useLocation() to get full URL info:

import { useLocation } from "react-router-dom";
const location = useLocation();
console.log(location.pathname);
console.log(location.search);
    

Conclusion:

React Router is an essential tool for building structured, scalable React applications. With features like nested routing, layouts, route protection, dynamic parameters, and navigation control, you can build any SPA with confidence. Practice each part to fully master client-side routing in React.