Protecting routes in a single-page app is essential when parts of your UI must only be available to authenticated users. This article shows a simple, pragmatic setup for React Router v6+ that scales from small apps to production-ready patterns (redirects, role checks, persisted auth, and lazy loading).

\n \n\n

Why protected routes?

\n \n\n \n

Protected routes keep unauthorized users out of certain views—dashboards, account settings, admin panels—while letting you control where users go after login. With React Router v6, navigation and redirects are declarative, and the library’s hooks make implementing guards straightforward.

\n \n\n

Core concepts

\n \n\n

Authentication state: where you keep whether the user is logged in and any metadata (roles, token).
Route guard: a component or function that decides whether to render the requested route or redirect to login.
Redirect with intent: remember the page a user wanted and send them back after successful login.

\n \n\n\n\n

Minimal auth context (TypeScript)

\n \n\n \n

Below is a small AuthContext that stores a token and user info. It exposes signIn/signOut helpers and a boolean isAuthenticated.

\n \n

// src/auth/AuthContext.tsx\nimport React, { createContext, useContext, useState } from \"react\";\n\ntype User = { id: string; name: string; role?: string } | null;\n\ntype AuthContextType = {\n  user: User;\n  token: string | null;\n  signIn: (token: string, user: User) => void;\n  signOut: () => void;\n  isAuthenticated: boolean;\n};\n\nconst AuthContext = createContext<AuthContextType | undefined>(undefined);\n\nexport const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const [token, setToken] = useState<string | null>(() => localStorage.getItem(\"token\"));\n  const [user, setUser] = useState<User>(() => {\n    const raw = localStorage.getItem(\"user\");\n    return raw ? JSON.parse(raw) : null;\n  });\n\n  const signIn = (newToken: string, newUser: User) => {\n    setToken(newToken);\n    setUser(newUser);\n    localStorage.setItem(\"token\", newToken);\n    localStorage.setItem(\"user\", JSON.stringify(newUser));\n  };\n\n  const signOut = () => {\n    setToken(null);\n    setUser(null);\n    localStorage.removeItem(\"token\");\n    localStorage.removeItem(\"user\");\n  };\n\n  const value: AuthContextType = {\n    user,\n    token,\n    signIn,\n    signOut,\n    isAuthenticated: Boolean(token),\n  };\n\n  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;\n};\n\nexport const useAuth = () => {\n  const ctx = useContext(AuthContext);\n  if (!ctx) throw new Error(\"useAuth must be used within an AuthProvider\");\n  return ctx;\n};

\n\n

Simple ProtectedRoute using Navigate (React Router v6)

\n \n\n \n

This component checks auth and either renders its children or redirects to /login. The current location is preserved so we can return post-login.

\n \n

// src/routes/ProtectedRoute.tsx\nimport React from \"react\";\nimport { Navigate, useLocation } from \"react-router-dom\";\nimport { useAuth } from \"../auth/AuthContext\";\n\nexport const ProtectedRoute: React.FC<{ children: JSX.Element }> = ({ children }) => {\n  const auth = useAuth();\n  const location = useLocation();\n\n  if (!auth.isAuthenticated) {\n    return <Navigate to=\"/login\" state={{ from: location }} replace />;\n  }\n\n  return children;\n};

\n\n

Router setup with protected paths

\n \n\n \n

Wrap the app with AuthProvider and guard routes where needed.

\n \n

// src/App.tsx\nimport React from \"react\";\nimport { BrowserRouter, Routes, Route } from \"react-router-dom\";\nimport { AuthProvider } from \"./auth/AuthContext\";\nimport { ProtectedRoute } from \"./routes/ProtectedRoute\";\nimport Home from \"./pages/Home\";\nimport Login from \"./pages/Login\";\nimport Dashboard from \"./pages/Dashboard\";\n\nexport default function App() {\n  return (\n    <AuthProvider>\n      <BrowserRouter>\n        <Routes>\n          <Route path=\"/\" element={<Home />} />\n          <Route path=\"/login\" element={<Login />} />\n          <Route\n            path=\"/dashboard\"\n            element={\n              <ProtectedRoute>\n                <Dashboard />\n              </ProtectedRoute>\n            }\n          />\n        </Routes>\n      </BrowserRouter>\n    </AuthProvider>\n  );\n}

\n\n

Login: redirecting back after auth

\n \n\n \n

When navigating to /login, React Router will set location.state.from. Read that on login to redirect back.

\n \n

// src/pages/Login.tsx\nimport React from \"react\";\nimport { useLocation, useNavigate } from \"react-router-dom\";\nimport { useAuth } from \"../auth/AuthContext\";\n\nexport default function Login() {\n  const auth = useAuth();\n  const navigate = useNavigate();\n  const location = useLocation();\n  const from = (location.state as any)?.from?.pathname || \"/\";\n\n  const handleLogin = async () => {\n    // call your API -> get token + user\n    const fakeToken = \"abc123\";\n    const fakeUser = { id: \"1\", name: \"Alice\" };\n    auth.signIn(fakeToken, fakeUser);\n    navigate(from, { replace: true });\n  };\n\n  return (\n    <div>\n      <h2>Login</h2>\n      <button onClick={handleLogin}>Sign in</button>\n    </div>\n  );\n}

\n\n

Nested routes and Outlet-based guard

\n \n\n \n

If you have many child routes under a protected layout (e.g., /app/*), it’s cleaner to protect the parent and render children via Outlet.

\n \n

// src/routes/AppLayout.tsx\nimport React from \"react\";\nimport { Outlet, Navigate, useLocation } from \"react-router-dom\";\nimport { useAuth } from \"../auth/AuthContext\";\n\nexport default function AppLayout() {\n  const auth = useAuth();\n  const location = useLocation();\n  if (!auth.isAuthenticated) return <Navigate to=\"/login\" state={{ from: location }} replace />;\n\n  return (\n    <div>\n      <nav>/* ... */</nav>\n      <main>\n        <Outlet />\n      </main>\n    </div>\n  );\n}

\n\n \n

Then in routes:

\n \n

// inside <Routes>\n// <Route path=\"/app\" element={<AppLayout />}>\n//   <Route index element={<AppDashboard />} />\n//   <Route path=\"settings\" element={<Settings />} />\n// </Route>

\n\n

Role-based guards

\n \n\n \n

Sometimes you need to allow only users with certain roles. Extend the pattern with a RoleGuard.

\n \n

// src/routes/RoleGuard.tsx\nimport React from \"react\";\nimport { Navigate } from \"react-router-dom\";\nimport { useAuth } from \"../auth/AuthContext\";\n\nexport const RoleGuard: React.FC<{ role: string; children: JSX.Element }> = ({ role, children }) => {\n  const { user } = useAuth();\n  if (!user || user.role !== role) return <Navigate to=\"/unauthorized\" replace />;\n  return children;\n};

\n\n \n

Usage:

\n \n

// <Route path=\"/admin\" element={<RoleGuard role=\"admin\"><AdminPanel /></RoleGuard>} />

\n\n

Tips for production

\n \n\n

Token refresh: handle token expiry and silent refresh; store minimal data in localStorage and refresh tokens securely.
Protect API calls: a protected route in the UI is not enough—enforce auth server-side for APIs.
Avoid storing sensitive data in localStorage if XSS is a concern—consider httpOnly cookies.
Loading state: while you check an existing session (e.g., validate token on app load), render a loading indicator instead of redirecting immediately.
Error states: show clear unauthorized/forbidden screens for better UX.

\n \n\n\n\n\n\n

Testing protected routes

\n \n\n

Unit test ProtectedRoute: mock useAuth to return isAuthenticated true/false and assert rendering vs redirect behavior.
Integration (E2E): simulate unauthenticated user trying to access a protected URL, confirm redirect to login and correct final redirect.

\n \n\n\n

Summary

\n \n\n \n

Protected routes with React Router v6 are straightforward: maintain an auth state (context or global store), create a small guard component that uses Navigate and useLocation, and wire routes so unauthorized users are navigated to /login while preserving the intended destination. From there you can add role checks, token persistence, and refresh logic to make the system robust.

\n \n\n \n

If you want, I can provide a full starter repo template (TypeScript + React Router v6 + simple fake API) you can clone and run.

\n ","protected",false,"date_gmt","2025-11-19T00:42:12.000Z","excerpt",{"_320":328,"_322":323},"

A practical, beginner-friendly guide to implementing protected routes with React Router (v6+). Covers auth context, ProtectedRoute patterns, redirects, role-based guards, and tips for persistence and testing.

\n","modified_gmt","2025-11-19T00:42:14.000Z","protected-routes-in-react-router-beginner-friendly-setup","status","publish","sticky","tags",[337,338,339,340,341],74,24,22,72,49,{"_320":343},"Protected Routes in React Router: Beginner-Friendly Setup","type","post",{"_26":347,"_14":348,"_28":349,"_39":40,"_41":42,"_43":347,"_350":348,"_44":351,"_46":47,"_352":353,"_354":355,"_356":107,"_48":49,"_357":358,"_50":362},"Protected Routes in React Router — Beginner-Friendly Setup and Patterns","Learn how to implement protected routes in React Router v6. This beginner-friendly guide covers auth context, ProtectedRoute, redirects, role-based guards, persistence, and testing.",{"_30":31,"_32":32,"_33":34,"_35":36,"_37":38},"og_description","https://wordpress.fulldev.pl/2025/11/19/protected-routes-in-react-router-beginner-friendly-setup/","article_published_time","2025-11-19T01:42:12+00:00","article_modified_time","2025-11-19T01:42:14+00:00","author","twitter_misc",{"_359":107,"_360":361},"Written by","Est. reading time","5 minutes",{"_52":53,"_54":363},[364,393,402,406,412],{"_57":365,"_59":366,"_61":367,"_356":368,"_369":343,"_370":353,"_371":355,"_372":373,"_374":375,"_376":19,"_84":377,"_378":379,"_385":386,"_67":68,"_87":387},"Article","https://wordpress.fulldev.pl/2025/11/19/protected-routes-in-react-router-beginner-friendly-setup/#article",{"_59":351},{"_16":107,"_59":86},"headline","datePublished","dateModified","mainEntityOfPage",{"_59":351},"wordCount",500,"commentCount",{"_59":86},"keywords",[380,381,382,383,384],"Authentication","JavaScript","React","react-router","typescript","articleSection",[17],[388],{"_57":389,"_16":390,"_91":391},"CommentAction","Comment",[392],"https://wordpress.fulldev.pl/2025/11/19/protected-routes-in-react-router-beginner-friendly-setup/#respond",{"_57":394,"_59":351,"_60":351,"_16":347,"_61":395,"_370":353,"_371":355,"_14":348,"_64":396,"_67":68,"_87":398},"WebPage",{"_59":63},{"_59":397},"https://wordpress.fulldev.pl/2025/11/19/protected-routes-in-react-router-beginner-friendly-setup/#breadcrumb",[399],{"_57":400,"_91":401},"ReadAction",[351],{"_57":70,"_59":397,"_71":403},[404,405],{"_57":74,"_75":76,"_16":77,"_78":79},{"_57":74,"_75":81,"_16":343},{"_57":83,"_59":63,"_60":79,"_16":47,"_14":15,"_84":407,"_87":408,"_67":68},{"_59":86},[409],{"_57":90,"_91":410,"_96":411},{"_57":93,"_94":95},{"_57":98,"_99":100,"_101":102},{"_57":413,"_59":86,"_16":107,"_108":414,"_118":415,"_120":416,"_60":417},[105,106],{"_57":110,"_67":68,"_59":111,"_60":112,"_113":112,"_114":115,"_116":115,"_117":107},{"_59":111},[122],"https://wordpress.fulldev.pl/author/fulldev/","categories_json",[420],{"_10":11,"_12":13,"_14":15,"_16":17,"_20":21},"tags_json",[423],{"_10":337,"_12":76,"_14":15,"_16":380,"_20":424},"authentication",[],"prev",[],"total","groupedTags",[],"perPage","tag",{"_10":337,"_12":76,"_14":15,"_16":380,"_18":-5,"_20":424,"_22":434,"_24":435,"_460":461},"post_tag",{"_26":436,"_28":437,"_39":40,"_41":42,"_43":436,"_44":438,"_46":47,"_48":49,"_50":439},"Authentication Archives - Fulldev.pl",{"_30":31,"_32":32,"_33":34,"_35":36,"_37":38},"https://wordpress.fulldev.pl/tag/authentication/",{"_52":53,"_54":440},[441,445,449,455],{"_57":58,"_59":438,"_60":438,"_16":436,"_61":442,"_64":443,"_67":68},{"_59":63},{"_59":444},"https://wordpress.fulldev.pl/tag/authentication/#breadcrumb",{"_57":70,"_59":444,"_71":446},[447,448],{"_57":74,"_75":76,"_16":77,"_78":79},{"_57":74,"_75":81,"_16":380},{"_57":83,"_59":63,"_60":79,"_16":47,"_14":15,"_84":450,"_87":451,"_67":68},{"_59":86},[452],{"_57":90,"_91":453,"_96":454},{"_57":93,"_94":95},{"_57":98,"_99":100,"_101":102},{"_57":456,"_59":86,"_16":107,"_108":457,"_118":458,"_120":459},[105,106],{"_57":110,"_67":68,"_59":111,"_60":112,"_113":112,"_114":115,"_116":115,"_117":107},{"_59":111},[122],"id_","691d225510895acfc3764be6","actionData","errors"]

Articles with tag Authentication:

Protected Routes in React Router: Beginner-Friendly Setup