tanstack-react-router_guide

Protect TanStack Router routes with beforeLoad authentication and redirects.

Updated Aug 27, 2026

Search Tags:#react #redirect #tanstack-router #authenticate #beforeLoad #auth-context #authenticated-routes

Ready to run

npx skills add https://github.com/mathfalcon/revendiste --skill tanstack-react-router-guide

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-react-router_guide
Source: https://github.com/mathfalcon/revendiste/tree/main/.cursor/skills/tanstack-react-router_guide
Command: npx skills add https://github.com/mathfalcon/revendiste --skill tanstack-react-router-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Authentication is a common requirement for web applications. This guide shows how to use TanStack Router to build protected routes and redirect users to login when they try to access them.

Core Features & Use Cases

Protected routes via route.beforeLoad to guard access and redirect unauthenticated users.
Redirect handling with login flow, including preserving the original destination for post-login navigation.
Router context integration to share authentication state across nested routes and layouts.
Support for non-redirected authentication flows where a login component is shown in place.

Quick Start

Create a protected route with a beforeLoad function that checks authentication and redirects to /login if not authenticated.
Use redirect({ to: '/login', search: { redirect: location.href } }) to return users after login.
Wire an AuthProvider or React context to supply isAuthenticated state across routes.

Frequently Asked Questions about tanstack-react-router_guide

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I protect routes in TanStack Router and redirect unauthenticated users?▼

Protect routes in TanStack Router by using the route.beforeLoad function to check authentication state and redirect unauthenticated users to the login page. This enforces access control before the route renders.

How does router context work for sharing authentication state in TanStack Router?▼

Router context integration shares authentication state across nested routes and layouts. By wiring an AuthProvider or React context, you supply isAuthenticated data consistently throughout the protected route hierarchy.

Can I preserve the original destination when redirecting users to login in TanStack Router?▼

Yes, preserve the original destination during redirect handling by passing the current URL as a search parameter. Use redirect({ to: '/login', search: { redirect: location.href } }) to return users after successful login.

Does TanStack Router support showing a login component instead of redirecting for protected routes?▼

Yes, TanStack Router supports non-redirected authentication flows where a login component is shown in place. This allows you to render the login UI directly within the protected layout instead of navigating away.

What is the best way to guard nested routes with authentication in a React app?▼

The best way to guard nested routes is using route.beforeLoad combined with router context. This validates authentication before loading nested layouts and redirects unauthorized users before accessing protected dashboards.