React Router Tutorial: Protected Routes and Authentication

React Router Tutorial: Protected Routes and Authentication | Karyvio

A React application often starts with a single page, but real projects quickly need more. A job portal might have a jobs page, job details, a login screen, and a private dashboard. An e-commerce application might have a product catalog, cart, account page, and order history.

React Router helps developers navigate between these screens without building a separate React application for every URL.

However, navigation becomes more complicated when some pages should be available only to authenticated users. This is where protected routes become useful.

In this tutorial, you will build a small routing structure, create a reusable protected-route component, redirect users to login, and understand why frontend route protection is not a replacement for backend authorization.

1. What Does React Router Do?

React Router connects URL paths to React components. When a user navigates to a route, the application renders the corresponding page while maintaining the usual single-page application experience.

For example:

URL	Page
`/`	Home
`/jobs`	Job listings
`/login`	Login
`/dashboard`	Private dashboard
`/profile`	User profile

Instead of manually checking window.location.pathname throughout your application, you can define routes in one place.

2. Install React Router

Create a React project using Vite if you do not already have one:

jsx

import { BrowserRouter, Routes, Route } from "react-router";

function Home() {
  return <h1>Home Page</h1>;
}

function Jobs() {
  return <h1>Available Jobs</h1>;
}

function Login() {
  return <h1>Login Page</h1>;
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/jobs" element={<Jobs />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

jsx

import { Link } from "react-router";

export default function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/jobs">Jobs</Link>
      <Link to="/login">Login</Link>
    </nav>
  );
}

jsx

import { Navigate, Outlet, useLocation } from "react-router";

export function ProtectedRoute({ isAuthenticated }) {
  const location = useLocation();

  if (!isAuthenticated) {
    return (
      <Navigate
        to="/login"
        replace
        state={{ from: location }}
      />
    );
  }

  return <Outlet />;
}

jsx

import { BrowserRouter, Routes, Route } from "react-router";
import { ProtectedRoute } from "./ProtectedRoute";

function Home() {
  return <h1>Welcome to the Job Portal</h1>;
}

function Login() {
  return <h1>Sign in to your account</h1>;
}

function Dashboard() {
  return <h1>Your Dashboard</h1>;
}

function Jobs() {
  return <h1>Browse Jobs</h1>;
}

export default function App() {
  const isAuthenticated = false;

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/jobs" element={<Jobs />} />
        <Route path="/login" element={<Login />} />

        <Route element={
          <ProtectedRoute isAuthenticated={isAuthenticated} />
        }>
          <Route path="/dashboard" element={<Dashboard />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

jsx

import { useLocation, useNavigate } from "react-router";

export default function Login({ onLogin }) {
  const location = useLocation();
  const navigate = useNavigate();

  async function handleLogin(event) {
    event.preventDefault();

    // onLogin should authenticate with the real backend.
    await onLogin();

    const destination = location.state?.from;
    const target = destination
      ? `${destination.pathname}${destination.search}${destination.hash}`
      : "/dashboard";

    navigate(target, { replace: true });
  }

  return (
    <form onSubmit={handleLogin}>
      <h1>Login</h1>
      <button type="submit">Sign in</button>
    </form>
  );
}

jsx

import { Routes, Route } from "react-router";

function NotFound() {
  return <h1>404 - Page Not Found</h1>;
}

function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<h1>Home</h1>} />
      <Route path="/jobs" element={<h1>Jobs</h1>} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

A fallback route improves navigation and prevents unknown paths from displaying an empty page.

Remember that production hosting must also be configured to serve the single-page application's entry point for valid client-side routes.

10. Common React Router Mistakes

Using Ordinary Anchors for Every Internal Link

A standard <a href="/jobs"> can trigger a full document navigation. Use React Router's Link for ordinary internal navigation when appropriate.

Forgetting to Render Nested Routes

When using nested routes, the parent layout or guard generally needs an Outlet to display the matching child route.

Redirecting Without Preserving the Destination

Always sending users to the same page after login can create a frustrating experience. Preserve the intended destination when appropriate and validate redirect targets safely.

Treating Frontend Protection as Security

A protected route only controls what the frontend renders. It does not stop someone from calling an API directly. The backend must verify authentication and authorization for every protected operation.

Storing Sensitive Authentication Data Insecurely

Avoid treating a client-controlled flag or arbitrary local-storage value as proof of identity. Use a properly designed authentication system, secure session handling, and appropriate server-side checks.

Forgetting Production Hosting Configuration

Client-side routing can work locally but fail after deployment if the hosting platform returns a 404 for nested URLs. Configure the host's fallback behavior according to the deployment environment.

11. When Should You Use Nested Routes?

Nested routes are especially useful when several pages share a common layout.

Scenario	Example
Dashboard	`/dashboard/profile`
Job portal	`/jobs/:jobId`
E-commerce	`/account/orders`
Admin panel	`/admin/users`

A shared parent layout can contain navigation, a sidebar, or a protected-route check while an Outlet renders the active child page.

12. Practical React Router Checklist

Before deploying a routed application, check that:

Final Takeaway

React Router provides the navigation structure needed to build multi-page experiences inside a React application. With nested routes, reusable layouts, navigation state, and protected-route components, developers can create more organized applications without duplicating route logic.

Start with a few basic routes, introduce nested layouts as the application grows, and add authentication-aware navigation when necessary.

Most importantly, remember that frontend route protection controls the interface, while backend authorization protects the actual data and operations. Both are necessary for a secure application.

CODE

React Router: Build Protected Routes and Authentication-Based Navigation

Comments (0)

Keep reading

React Performance Optimization: 10 Practical Techniques for Faster Applications

How to Organize a JavaScript Project: A Practical Folder Structure and Clean Code Guide

React Fundamentals: Build Interactive UIs with Components, Props, State, and Hooks

Next.js App Router: Pages, Layouts, Server Components, and Data Fetching

Jobs related to this article

AI Engineer – Generative AI & Agentic AI

React Router: Build Protected Routes and Authentication-Based Navigation

1. What Does React Router Do?

2. Install React Router

3. Create Your First Routes

4. Navigate Without Reloading the Entire Page

5. Understand Protected Routes

6. Build a Reusable Protected Route

7. Add a Protected Dashboard Route

8. Redirect Users Back to Their Original Page

9. Handle Unknown Routes