Routing with TanStack Router

The Jubiloop webapp uses TanStack Router for type-safe, file-based routing.

Overview

We use TanStack Router v1 with:

• File-based routing in the /src/routes/ directory
• Automatic code splitting via Vite plugin
• Type-safe navigation throughout the app
• Route groups for authentication boundaries

Current Setup

File Structure

src/routes/
├── __root.tsx          # Root layout with auth checks
├── index.tsx           # Home page (/)
├── (public)/           # Public routes (no auth required)
│   ├── sign-in.tsx    # /sign-in
│   └── sign-up.tsx    # /sign-up
└── (auth)/             # Protected routes
    └── dashboard/
        └── route.tsx   # /dashboard

Router Configuration

See src/main.tsx for the router setup with TanStack Query integration.

Documentation

For comprehensive routing documentation, refer to the official TanStack Router docs:

• Getting Started
• File-Based Routing
• Route Groups
• Authentication
• Code Splitting

Key Concepts for Jubiloop

Authentication Pattern

We handle authentication in __root.tsx using the beforeLoad hook. See the authentication feature documentation for implementation details.

Route Groups

• (public) - Routes accessible without authentication
• (auth) - Routes requiring authentication

Navigation

// Use the Link component
import { Link } from '@tanstack/react-router'
// Use the useNavigate hook
import { useNavigate } from '@tanstack/react-router'

Future Patterns

As we develop more features, we'll establish patterns for:

• Pathless route layouts
• Nested route structures
• Search parameter validation
• Route-level data loading

For now, follow the TanStack Router documentation and existing patterns in the codebase.