Paths configuration

Shared path configuration keeps links and redirects consistent when your app grows. The kit uses src/config/paths.ts for its public, auth, and dashboard destinations.

Navigation

Use the shared destinations when linking between existing screens. For example:

import { Link } from "@tanstack/react-router";

import { m } from "@/lib/i18n/messages.js";
import { pathsConfig } from "@/config/paths";

<Link to={pathsConfig.dashboard.settings.billing}>{m.billing()}</Link>;

A centralized destination is easier to update than the same URL copied into several components. TanStack Router also checks route targets against your application's route tree.

New routes

Create the page in the routes area, add its shared destination, and reference it from navigation. Development regenerates the route tree automatically; you can also run:

pnpm generate-routes

The feature recipe covers a new dashboard page. For public pages, review your sitemap and metadata too.

Redirects

When renaming a public URL, update its shared destination and any external links you control. Preserve a redirect from the previous address if customers or search engines already use it.

Private routes still need server-side access checks. The server functions guide covers the data boundary behind your page.