Setting Up TanStack File-Based Router with a Vite React App

Integrating a file-based router in your Vite React application can streamline your development process by allowing you to organize your routes in a simple, intuitive manner. TanStack's file-based router is an excellent choice for this task. In this blog post, I'll guide you through the process of setting up TanStack File Router in a Vite React app.

Step 1: Set Up a Vite React Project

First, we need to create a new Vite React project. If you already have a Vite React project, you can skip this step.

Create a new Vite React project

    npm create vite@latest my-react-app -- --template react
    cd my-react-app

Install dependencies

    npm install

Step 2: Install TanStack Router

Next, we need to install the TanStack Router.

Install TanStack Router

    npm install @tanstack/react-router

Install the Vite Plugin and the Router Devtools

    npm install --save-dev @tanstack/router-plugin @tanstack/router-devtools

Configure the Vite Plugin

   import {
       defineConfig
   } from "vite";
   import react from "@vitejs/plugin-react";
   import {
       TanStackRouterVite
   } from "@tanstack/router-plugin/vite";

   // https://vitejs.dev/config/
   export default defineConfig({
       plugins: [TanStackRouterVite(), react()],
   });

Step 3: Set Up the File-Based Router

Now, let's set up the file-based router by creating the necessary directory structure and defining our routes.

Create the directory structure

Create a routes folder insie src folder of your project.
Inside the routes folder, create your route components and structure them according to your needs.
Follow Tanstack Router guide-lines.

Example directory structure

 src
 ┣ routes
 ┃ ┣ about.lazy.jsx
 ┃ ┣ index.lazy.jsx
 ┃ ┣ posts.jsx
 ┃ ┗ __root.jsx
 ┣ App.jsx
 ┣ index.css
 ┣ main.jsx
 ┗ routeTree.gen.ts

Route files with the .lazy.tsx extension are lazy loaded via separate bundles to keep the main bundle size as lean as possible.

Define the routes

src/routes/__root.jsx

import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";

// It's the layout component
export const Route = createRootRoute({
  component: () => (
    <>
      <div className="p-2 flex gap-2">
         <Link to="/" className="[&.active]:font-bold">
           Home
         </Link>{" "}
         <Link to="/about" className="[&.active]:font-bold">
           About
         </Link>
         <Link to="/posts" className="[&.active]:font-bold">
           Posts
         </Link>
       </div>
       <hr />
       <Outlet />
       <TanStackRouterDevtools />
     </>
    ),
});

src/routes/index.lazy.jsx

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

export const Route = createLazyFileRoute("/")({
  component: Index,
});

function Index() {
  return (
    <div className="p-2">
      <h3>Welcome Home!</h3>
    </div>
  );
}

src/routes/about.lazy.jsx

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

export const Route = createLazyFileRoute("/about")({
  component: About,
});

function About() {
  return <div className="p-2">Hello from About!</div>;
}

src/routes/posts.jsx

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

export const Route = createFileRoute("/posts")({
  component: Posts,
});

function Posts() {
  return (
    <div className="p-2">
      <h3>Hello from Post!</h3>
    </div>
  );
}

Configure the router in App.jsx

import { RouterProvider, createRouter } from "@tanstack/react-router";
// Import the auto generated route tree
import { routeTree } from "./routeTree.gen";

// Create a new router instance
const router = createRouter({ routeTree });

export default function App() {
  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

src/routeTree.gen.ts file will be autometically generated.

Step 4: Run Your Application

With everything set up, it's time to run your application.

Start the development server

    npm run dev

Open your browser and navigate to http://localhost:5173/ . You should see your Vite React application running with TanStack Router handling the routes.

To add more routes, simply create new components in the routes directory and configure them in the __root.jsx file as needed.

By following these steps, you can efficiently set up a file-based router in your Vite React application using TanStack Router. This setup not only simplifies route management but also enhances the organization and scalability of your project.

Blog