How to Simplify File-Based Routing in React with TanStack Router

Routing is essential in React apps, and TanStack React Router provides a modern, type-safe approach. With the newer file-based routing system, you can create pages just by creating files—no need to manually define route trees in code.

What is TanStack Router?

TanStack Router is a powerful routing library from the creators of React Query (now TanStack Query).

It focuses on:

• File-based routing: your folder and file structure automatically defines your app’s routes.
• Type safety: route parameters and search queries are fully typed.
• Code splitting: load only the code you need for each page.
• Layouts and nested routes: easily structure your UI around reusable layouts.

In short, it brings the simplicity of frameworks like Next.js to plain React projects.

Setup Guide

Let’s set it up step-by-step.

Step 1: Create vite app

npm create vite@latest

Step 2: Install Dependencies

We’ll need three packages:

npm install @tanstack/react-router @tanstack/react-router-devtools
npm install -D @tanstack/router-plugin

• @tanstack/react-router: The main routing library.
• @tanstack/react-router-devtools: Helps debug your routes during development. (optional)
• @tanstack/router-plugin: A Vite plugin that automatically generates your route tree.

Step 3: Configure the Vite Plugin

Open your vite.config.ts file and configure it like this:

// vite.config.tsimport { defineConfig } from 'vite'import react from '@vitejs/plugin-react'import { tanstackRouter } from '@tanstack/router-plugin/vite'export default defineConfig({  plugins: [    // Make sure this plugin comes before '@vitejs/plugin-react'    tanstackRouter({      target: 'react',      autoCodeSplitting: true,    }),    react(),  ],})

Step 4: Create Your Routes

Create the following folder and files in your src directory:

src/
 + routes/
    + __root.tsx
    + index.tsx
    + about.tsx
 src/main.tsx

Let’s go through each one.

src/routes/__root.tsx

This is the root layout — it wraps all your routes.

import { createRootRoute, Link, Outlet } from '@tanstack/react-router'import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'const RootLayout = () => (  <>    <div className="p-2 flex gap-2">      <Link to="/" className="[&.active]:font-bold">Home</Link>      <Link to="/about" className="[&.active]:font-bold">About</Link>    </div>    <hr />    <Outlet />    <TanStackRouterDevtools />  </>)export const Route = createRootRoute({ component: RootLayout })

Here’s what’s happening:

• <link> lets you navigate between routes without reloading the page.
• <outlet> renders the currently active route.

src/routes/index.tsx

This defines your home page (/).

import { createFileRoute } from '@tanstack/react-router'export const Route = createFileRoute('/')({  component: Index,})function Index() {  return (    <div className="p-2">      <h3>Welcome Home!</h3>    </div>  )}

The route path / comes directly from the file name index.tsx.

src/routes/about.tsx

This defines your About page (/about).

import { createFileRoute } from '@tanstack/react-router'export const Route = createFileRoute('/about')({  component: About,})function About() {  return <div className="p-2">Hello from About!</div>}

Again, the URL /about comes from the file name about.tsx.

No manual route definitions needed — the file structure is the routing.

Step 5: Create the Main Entry File

Now, open or create src/main.tsx and add:

import { StrictMode } from 'react'import ReactDOM from 'react-dom/client'import { RouterProvider, createRouter } from '@tanstack/react-router'// Import the generated route treeimport { routeTree } from './routeTree.gen'// Create a new router instanceconst router = createRouter({ routeTree })// Register the router instance for type safetydeclare module '@tanstack/react-router' {  interface Register {    router: typeof router  }}// Render the appconst rootElement = document.getElementById('root')!if (!rootElement.innerHTML) {  const root = ReactDOM.createRoot(rootElement)  root.render(    <StrictMode>      <RouterProvider router={router} />    </StrictMode>,  )}

Make sure your index.html has a <div id="root"></div> element — this is where the app mounts.

Step 6: Run Your App

Finally, start your app:

npm run dev

Then open your browser and visit: http://localhost:5173

You’ll see your Home page, and clicking About will take you to the About page — all powered by file-based routing!

Conclusion

Compared to traditional routing setups where you manually write all routes, TanStack Router’s file-based routing:

• Automatically builds your route tree from files.
• Reduces boilerplate.
• Keeps your project organized.
• Enables type safety and code splitting out of the box.

It’s a perfect match for developers who love the flexibility of React and want the simplicity of frameworks like Next.js—without leaving the React ecosystem.

To read more about How to Use the New use() API in React 19 for Smarter Data Fetching, refer to our blog, How to Use the New use() API in React 19 for Smarter Data Fetching.