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.

1. Create a new Vite React project:

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

2. Install dependencies:

    npm install
   

Step 2: Install TanStack Router

Next, we need to install the TanStack Router.

1. Install TanStack Router:

    npm install @tanstack/react-router
   

2. Install the Vite Plugin and the Router Devtools:

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

3. 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.

1. 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.

2. 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.

3. 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>
         );
       }
     

4. Configure the router in App.jsx:

   • src/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.

1. Start the development server:

    npm run dev
   

2. 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.