DEV Community

Dipankar Paul
Dipankar Paul

Posted on • Originally published at iamdipankarpaul.hashnode.dev on

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
Enter fullscreen mode Exit fullscreen mode

Install dependencies

    npm install
Enter fullscreen mode Exit fullscreen mode

Step 2: Install TanStack Router

Next, we need to install the TanStack Router.

Install TanStack Router

    npm install @tanstack/react-router
Enter fullscreen mode Exit fullscreen mode

Install the Vite Plugin and the Router Devtools

    npm install --save-dev @tanstack/router-plugin @tanstack/router-devtools
Enter fullscreen mode Exit fullscreen mode

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()],
   });
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 />
     </>
    ),
});
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>;
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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} />
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)