getting-started-with-tanstack-router

  1. Set up project structure
    1. src/routes/__root.tsx
    2. src/routes/index.tsx
    3. src/routes/posts.$id.tsx
    4. src/main.tsx
  2. Generate the route tree
  3. Start the app

Tanstack Router is an alternative to React Router.

For simplicity, we will create a Vite + React project from scratch:

1
npm create vite@latest tanstack-router-demo -- --template react-ts

This command will create a folder tanstack-router-demo for your demo project and install all dependency packages, finally start the server at http://localhost:5173 automatically.

Then install TanStack Router:

1
npm install @tanstack/react-router

At the time of writing, the latest @tanstack/react-router version is 1.143.6.

Set up project structure

1
2
3
4
5
6
src/
├── main.tsx
├── routes/
│   ├── __root.tsx
│   ├── index.tsx
│   └── posts.$id.tsx

src/routes/__root.tsx

This file defines the app layout.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { createRootRoute, Outlet, Link } from "@tanstack/react-router";

export const Route = createRootRoute({
  component: RootLayout,
});

function RootLayout() {
  return (
    <div style={{ padding: 16 }}>
      <h1>TanStack Router Demo</h1>

      <nav style={{ display: "flex", gap: 12 }}>
        <Link to="/">Home</Link>
        <Link to="/posts/1">Post 1</Link>
        <Link to="/posts/2">Post 2</Link>
      </nav>

      <hr />

      <Outlet />
    </div>
  );
}

src/routes/index.tsx

1
2
3
4
5
6
7
8
9
import { createFileRoute } from "@tanstack/react-router";

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

function Home() {
  return <div>Home page</div>;
}

src/routes/posts.$id.tsx

1
2
3
4
5
6
7
8
9
10
11
import { createFileRoute } from "@tanstack/react-router";

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

function Post() {
  const { id } = Route.useParams();

  return <div>Post id: {id}</div>;
}

src/main.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createRouter } from "@tanstack/react-router";

// 👇 auto-generated route tree
import { routeTree } from "./routeTree.gen";

const router = createRouter({ routeTree });

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Generate the route tree

TanStack Router needs to scan your routes/ folder.

Run once:

1
npx @tanstack/router-cli generate

It creates:

1
src/routeTree.gen.ts

Re-run the command whenever you add/remove routes.

Start the app

1
npm run dev