TanStack Router入門

2024-2025 Shunsuke Watanabe

このチュートリアルについて

👨‍💻サンプルコード → https://github.com/craftgear/tsr-tutorial

discord → https://discord.gg/3havwjWGsw

bluesky → https://bsky.app/profile/craftgear.bsky.social

📝 blog → https://craftgear.github.io/posts/

プロジェクト初期化

1
npx create-tsrouter-app

ファイル構成

1
.
2
├── index.html
3
├── public
4
├── src
5
│   ├── main.tsx
6
│   ├── routeTree.gen.ts
7
│   ├── routes
8
│   │   ├── __root.tsx
9
│   │   └── index.tsx
10
│   └── styles.css
11
├── tsconfig.json
12
└── vite.config.js

• main.tsx アプリケーションのエントリポイント、ルーターの設定もここで行う
• routeTree.gen.ts viteのTanStack Routerプラグインによって自動生成されるファイル、ルートの型情報を提供する
• __root.tsx 大元のルートになるファイル

TailwindcssとDaisyUIのインストール

1
npm i -D tailwindcss @tailwindcss/vite daisyui

• vite.config.ts にtailwindcssプラグインを追加

  1
  import { defineConfig } from "vite";
  2
  import viteReact from "@vitejs/plugin-react";
  3
  import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
  4
  import tailwindcss from "@tailwindcss/vite";
  5
  
  6
  // https://vitejs.dev/config/
  7
  export default defineConfig({
  8
    plugins: [
  9
      TanStackRouterVite({ autoCodeSplitting: true }),
  10
      viteReact(),
  11
      tailwindcss(),
  12
    ],
  13
    test: {
  14
      globals: true,
  15
      environment: "jsdom",
  16
    },
  17
  });

• src/styles.css にtailwindcssとdaisyUIの設定を追加

  1
   @import "tailwindcss";
  2
   @plugin "daisyui" {
  3
     themes: abyss --default;
  4
   }

開発用サーバー立ち上げ

• これを忘れるとファイルの自動生成が動かないのでとても重要

1
npm start

レイアウトの追加

1. __root.tsx を開き、サイト全体のレイアウトを追加

   1
   import { createRootRoute, Outlet } from "@tanstack/react-router";
   2
   
   3
   export const Route = createRootRoute({
   4
     component: () => (
   5
       <div className="h-svh flex flex-col">
   6
         <div className="grow p-8 grid place-items-center overflow-scroll">
   7
           <Outlet />
   8
         </div>
   9
       </div>
   10
     ),
   11
   });

ヘッダーとフッターの作成

1. src/components/Header.tsx を作成

   1
   export const Header = () => {
   2
     return (
   3
       <div className="navbar bg-base-100 px-8">
   4
         <div className="flex-1">
   5
           <a>ブログトップ</a>
   6
         </div>
   7
         <div className="flex-none">
   8
           <ul className="flex gap-4">
   9
             <li>
   10
               <a>記事一覧</a>
   11
             </li>
   12
             <li>
   13
               <a>タグ一覧</a>
   14
             </li>
   15
             <li>
   16
               <a>About</a>
   17
             </li>
   18
           </ul>
   19
         </div>
   20
       </div>
   21
     );
   22
   };

2. src/components/Footer.tsx を作成

   1
    export const Footer = () => {
   2
      return (
   3
        <footer className="footer footer-center bg-base-300 text-base-content p-4">
   4
          <aside>
   5
            <p>
   6
              Copyright © {new Date().getFullYear()} - All right reserved by 😊
   7
            </p>
   8
          </aside>
   9
        </footer>
   10
      );
   11
    };

3. __root.tsx にヘッダーとフッターを追加

   1
   import { createRootRoute, Outlet } from "@tanstack/react-router";
   2
   import { Header } from "../components/Header";
   3
   import { Footer } from "../components/Footer";
   4
   
   5
   export const Route = createRootRoute({
   6
     component: () => (
   7
       <div className="h-dvh flex flex-col">
   8
         <Header />
   9
         <div className="grow px-8 grid place-items-center overflow-scroll">
   10
           <Outlet />
   11
         </div>
   12
         <Footer />
   13
       </div>
   14
     ),
   15
   });

ルートの作成

1. routes/posts/index.tsx を作成すると、自動で以下の内容が書き込まれます

   1
   import { createFileRoute } from '@tanstack/react-router'
   2
   
   3
   export const Route = createFileRoute('/posts/')({
   4
     component: RouteComponent,
   5
   })
   6
   
   7
   function RouteComponent() {
   8
     return <div>Hello "/posts/"!</div>
   9
   }

2. <Header /> コンポーネントのaタグを <Link /> で置き換えます

   1
   import { Link } from "@tanstack/react-router";
   2
   
   3
   export const Header = () => {
   4
     return (
   5
       <div className="navbar bg-base-100 px-8">
   6
         <div className="flex-1">
   7
           <Link to="/">ブログトップ</Link>
   8
         </div>
   9
         <div className="flex-none">
   10
           <ul className="flex gap-4">
   11
             <li>
   12
               <Link to="/posts">記事一覧</Link>
   13
             </li>
   14
             <li>
   15
               <Link to="/tags">タグ一覧</Link>
   16
             </li>
   17
             <li>
   18
               <Link to="/about">About</Link>
   19
             </li>
   20
           </ul>
   21
         </div>
   22
       </div>
   23
     );
   24
   };

3. タグ一覧とAboutで型エラーが出ていることを確認します

4. routes/tags.tsx と routes/about.tsx を新規作成し、エラーを解消します

パス区切りはディレクトリと . が使えます

• posts/index.tsx と posts.index.tsx は同じパスを指します。

index.tsx と route.tsx の違い

• posts/index.tsx と posts/route.tsx は同じパスを指しますが、<Outlet /> が動くか動かないかの違いがあります。

ダイナミックルートの作成

1. routes/posts/$postId.tsx ファイルを新規作成します

   1
    import { createFileRoute } from "@tanstack/react-router";
   2
   
   3
    export const Route = createFileRoute("/posts/$postId")({
   4
      component: RouteComponent,
   5
    });
   6
   
   7
    function RouteComponent() {
   8
      const { postId } = Route.useParams();
   9
      return <div>Hello "/posts/$postId"! {postId}</div>;
   10
    }

2. localhost:3000/posts/123 にアクセスし、postIdが表示されることを確認します

キャッチオールルート

• $のみ のルートはキャッチオールルートになり、パス区切りに関係なくそれ以降の全てにマッチします
• posts/$ が　http://localhost/posts/xxx と http://localhost/post/xxx/yyy のどちらにもマッチします
• マッチした部分は params._splat プロパティで参照できます

その他のルート

パスレスルート

• _ で始まるルートはどのパスにもマッチしない
• 子ルートをラップして、ミドルウェアのようにいろいろな機能を提供するのに使われる
  • 共通レイアウトの適用
  • 共通 loader の実行
  • 共通パラメーターの検証
  • 共通エラーコンポーネントの定義
  • 共通コンテキストの追加
• _layout.tsx がある場合、
  • _layout.index.tsx あるいは _layout/index.tsx が http://localhost/ にマッチし、_layout.tsx の <Outlet /> に _layout.index.tsx あるいは _layout/index.tsx の内容が表示される

ネスト解除ルート

• _ で終わるルートはルートコンポーネントの入れ子構造の一段階上になる
• 特定のパスだけレイアウトを外したい場合など
• https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#non-nested-routes

無視されるルート

• - で始まるファイルは無視される、ファイルの自動生成も動かない。

APIルート

• /routes/api はAPIルートのための特別なディレクトリとして予約されている
• APIルートには外部に公開するAPIを置く
• APIルートの場所を /routes/api 以外にしたい場合、tsr.config.json の apiBase を変更する

バーチャルファイルルート

• パスとルートの割当をコードで変更できる機能
• https://tanstack.com/router/latest/docs/framework/react/guide/virtual-file-routes
• ファイルベースルーティングの一部だけをバーチャルファイルルートにすることもできる
  • https://tanstack.com/router/latest/docs/framework/react/guide/virtual-file-routes#virtual-routes-inside-of-tanstack-router-file-based-routing

ディレクトリを（）で囲むとパスとしては認識されなくなる

• ディレクトリをファイルをまとめるためだけに使えるようになる
• https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#pathless-route-group-directories

自動コード分割

1. 自動コード分割の設定はvite.config.tsで行います

1
import { defineConfig } from "vite";
2
import viteReact from "@vitejs/plugin-react";
3
import tailwindcss from "@tailwindcss/vite";
4

5
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
6

7
// https://vitejs.dev/config/
8
export default defineConfig({
9
  plugins: [
10
    TanStackRouterVite({
11
      autoCodeSplitting: true,
12
    }),
13
    viteReact(),
14
    tailwindcss(),
15
  ],
16
  test: {
17
    globals: true,
18
    environment: "jsdom",
19
  },
20
});

• コード分割の対象になるのは以下のコンポーネントだけです
  • Route Component
  • Error Component
  • Pending Component
  • Not-found Component

Not Found 対応

• ルートではなく、notFoundComponentを使う
  • NotFoundRouteは廃止予定 https://tanstack.com/router/latest/docs/framework/react/guide/not-found-errors/#migrating-from-notfoundroute

1. main.tsx をひらき、createRouter のオプションに defaultNotFoundComponent を追加

   1
   ...
   2
   
   3
   // Create a new router instance
   4
   const router = createRouter({
   5
     routeTree,
   6
     defaultNotFoundComponent: () => {
   7
       return (
   8
         <>
   9
           <div>ページが見つかりません</div>
   10
           <Link to="/">トップページへ</Link>
   11
         </>
   12
       );
   13
     },
   14
   });
   15
   
   16
   ...

2. localhost:3000/hoge にアクセスし、ページが見つかりませんと表示されることを確認する

3. routes/posts/$postId.tsx を開き、loaderでnotFound()をスローする

   1
   import { createFileRoute, notFound } from "@tanstack/react-router";
   2
   
   3
   export const Route = createFileRoute("/posts/$postId")({
   4
     loader: () => {
   5
       throw notFound();
   6
     },
   7
     component: RouteComponent,
   8
   });
   9
   
   10
   function RouteComponent() {
   11
     const { postId } = Route.useParams();
   12
     return <div>Hello "/posts/$postId"! {postId}</div>;
   13
   }

4. http://localhost:3000/posts/123 にアクセスし、ページが見つかりませんと表示されることを確認する

5. routes/posts/$postId.tsx に notFoundComponent を追加する

   1
   import { createFileRoute, notFound } from "@tanstack/react-router";
   2
   
   3
   export const Route = createFileRoute("/posts/$postId")({
   4
     loader: () => {
   5
       throw notFound();
   6
     },
   7
     component: RouteComponent,
   8
     notFoundComponent: () => {
   9
       return <div>記事が見つかりません</div>;
   10
     },
   11
   });
   12
   
   13
   function RouteComponent() {
   14
     const { postId } = Route.useParams();
   15
     return <div>Hello "/posts/$postId"! {postId}</div>;
   16
   }

6. http://localhost:3000/posts/123 にアクセスし、記事が見つかりませんと表示されることを確認する

7. beforeLoad で notFound() をスローするよう変更する

   1
    import { createFileRoute, notFound } from "@tanstack/react-router";
   2
   
   3
    export const Route = createFileRoute("/posts/$postId")({
   4
      beforeLoad: () => {
   5
        throw notFound();
   6
      },
   7
      component: RouteComponent,
   8
      notFoundComponent: () => {
   9
        return <div>記事が見つかりません</div>;
   10
      },
   11
    });
   12
   
   13
    function RouteComponent() {
   14
      const { postId } = Route.useParams();
   15
      return <div>Hello "/posts/$postId"! {postId}</div>;
   16
    }

8. http://localhost:3000/posts/123 にアクセスし、レイアウトが消えていることを確認する

9. beforeLoad を削除する

ルートローディングライフサイクル

https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#the-route-loading-lifecycle

• __root.tsx beforeLoad → $postId.tsx beforeLoad
• __root.tsx loader → component & $postId.tsx loader → component

ページ遷移

1. routes/posts/index.tsx にダミー記事へのリンクを追加します

   1
   import { createFileRoute, Link } from "@tanstack/react-router";
   2
   
   3
   export const Route = createFileRoute("/posts/")({
   4
     component: RouteComponent,
   5
   });
   6
   
   7
   function RouteComponent() {
   8
     return (
   9
       <div className="h-full grid place-items-center">
   10
         <ul>
   11
           <li>
   12
             <Link to="/posts/$postId" params={{ postId: "123" }}>
   13
               記事 123へ
   14
             </Link>
   15
           </li>
   16
         </ul>
   17
       </div>
   18
     );
   19
   }

2. from 属性を追加し、 to を相対パスにします

   • from は可能な限り追加することが推奨されています
   • https://tanstack.com/router/latest/docs/framework/react/guide/type-safety#narrow-to-relevant-routes-as-much-as-you-possibly-can

3. ページ切り替えリンクを追加します

   1
   import { createFileRoute, Link } from "@tanstack/react-router";
   2
   
   3
   export const Route = createFileRoute("/posts/")({
   4
     component: RouteComponent,
   5
   });
   6
   
   7
   function RouteComponent() {
   8
     return (
   9
       <div className="h-full grid place-items-center">
   10
         <ul>
   11
           <li>
   12
             <Link from="/posts" to="./$postId" params={{ postId: "123" }}>
   13
               記事 123へ
   14
             </Link>
   15
           </li>
   16
         </ul>
   17
         <Link from="/posts" to="." search={{page: 2}} >
   18
           次のページへ
   19
         </Link>
   20
       </div>
   21
     );
   22
   }

4. search 属性に関数を渡すように変更します

   1
   ...
   2
   
   3
   <Link
   4
     from="/posts"
   5
     to="."
   6
     search={(prev) => ({
   7
       ...prev,
   8
       page: prev.page + 1,
   9
     })}
   10
   >
   11
     次のページへ
   12
   </Link>
   13
   
   14
   ...

5. パラメータの型と検証を追加します

   1
   ...
   2
   
   3
   type PostsSearchProps = {
   4
     page: number;
   5
   };
   6
   
   7
   export const Route = createFileRoute("/posts/")({
   8
     validateSearch: (search: Record<string, string>): PostsSearchProps => {
   9
       return {
   10
         page: Number(search?.page ?? 1),
   11
       };
   12
     },
   13
     component: RouteComponent,
   14
   });
   15
   
   16
   ...

6. ページ番号を表示する

   1
   ...
   2
   
   3
   function RouteComponent() {
   4
     const { page } = Route.useSearch();
   5
   
   6
     return (
   7
       <div className="h-full grid place-items-center">
   8
         <ul>
   9
           <li>
   10
             <Link from="/posts" to="./$postId" params={{ postId: "123" }}>
   11
               記事 123へ
   12
             </Link>
   13
           </li>
   14
         </ul>
   15
         <Link
   16
           from="/posts"
   17
           to="."
   18
           search={(prev) => ({
   19
             ...prev,
   20
             page: prev.page + 1,
   21
           })}
   22
         >
   23
         {page}  次のページへ
   24
         </Link>
   25
       </div>
   26
     );
   27
   }

7. <Header /> で型エラーが出ていることを確認します

8. zodとzod-adapterをインストール

   1
   npm i zod @tanstack/zod-adapter

9. validateParamsの処理をzodで置き換えます

   1
   import { createFileRoute, Link } from "@tanstack/react-router";
   2
   import { zodValidator } from "@tanstack/zod-adapter";
   3
   import { z } from "zod";
   4
   
   5
   const postsSearchParamsSchema = z.object({
   6
     page: z.number().default(1),
   7
   });
   8
   
   9
   export const Route = createFileRoute("/posts/")({
   10
     validateSearch: zodValidator(postsSearchParamsSchema),
   11
     component: RouteComponent,
   12
   });
   13
   
   14
   ...

10. <Header /> の型エラーが消えていることを確認します

activeProps

1. <Header /> をひらき、ブログトップのリンクに activeProps を追加します

   1
   import { Link } from "@tanstack/react-router";
   2
   
   3
   export const Header = () => {
   4
     return (
   5
       <div className="navbar bg-base-100 px-8">
   6
         <div className="flex-1">
   7
           <Link
   8
             to="/"
   9
             activeProps={{
   10
               className: "border-b-2 border-text",
   11
             }}
   12
           >
   13
             ブログトップ
   14
           </Link>
   15
         </div>
   16
         <div className="flex-none">
   17
           <ul className="flex gap-4">
   18
             <li>
   19
               <Link to="/posts">記事一覧</Link>
   20
             </li>
   21
             <li>
   22
               <Link to="/tags">タグ一覧</Link>
   23
             </li>
   24
             <li>
   25
               <Link to="/about">About</Link>
   26
             </li>
   27
           </ul>
   28
         </div>
   29
         </div>
   30
       </div>
   31
     );
   32
   };

2. 共通のオプションを作って全てのメニューで展開します

   1
   import { Link } from "@tanstack/react-router";
   2
   
   3
   const navLinkOptions = {
   4
     className: "pb-1",
   5
     activeProps: {
   6
       className: "border-b-2 border-text",
   7
     },
   8
   };
   9
   
   10
   export const Header = () => {
   11
     return (
   12
       <div className="navbar bg-base-100 px-8">
   13
         <div className="flex-1">
   14
           <Link to="/" {...navLinkOptions}>
   15
             ブログトップ
   16
           </Link>
   17
         </div>
   18
         <div className="flex-none">
   19
           <ul className="flex gap-4">
   20
             <li>
   21
               <Link to="/posts" {...navLinkOptions}>
   22
                 記事一覧
   23
               </Link>
   24
             </li>
   25
             <li>
   26
               <Link to="/tags" {...navLinkOptions}>
   27
                 タグ一覧
   28
               </Link>
   29
             </li>
   30
             <li>
   31
               <Link to="/about" {...navLinkOptions}>
   32
                 About
   33
               </Link>
   34
             </li>
   35
           </ul>
   36
         </div>
   37
       </div>
   38
     );
   39
   };

ページ遷移に関するその他の機能

• <Link /> 以外に以下の方法でもページ遷移を行えます
  • useNavigateフック

    • フックを実行した戻り値のnavigate 関数を使ってページ遷移します。

      1
      const navigate = useNavigate({from: '/post/$postId'})
      2
      // ...
      3
      navigate({ to: '/posts/$postId', params: { postId } })

  • <Navigate /> コンポーネント
  • router.navigate API
    • useNavigateフックの戻り値と同じ、ただしrouterを参照できればどこでも使えます。
• linkOption 関数を使うと <Link /> navigate <Navigate /> で使える共通の属性をあらかじめ作成しておくことができます
  • https://tanstack.com/router/latest/docs/framework/react/guide/link-options#using-linkoptions-function-to-create-re-usable-options

データローダー

1. routes/post/$postId.tsx にデータローダーを追加してコンソールを確認します

   1
    import { createFileRoute } from "@tanstack/react-router";
   2
   
   3
    export const Route = createFileRoute("/posts/$postId")({
   4
      loaderDeps: ({ search }) => {
   5
        console.log("loaderDeps", search);
   6
        return { hoge: "hoge" };
   7
      },
   8
      beforeLoad: ({ params, search }) => {
   9
        console.log("beforeLoad", params, search);
   10
      },
   11
      loader: ({ params, deps }) => console.log("loader", params, deps),
   12
      component: RouteComponent,
   13
      notFoundComponent: () => {
   14
        return <div>記事が見つかりません</div>;
   15
      },
   16
    });
   17
   
   18
    function RouteComponent() {
   19
      const { postId } = Route.useParams();
   20
      return <div>Hello "/posts/$postId"! {postId}</div>;
   21
    }

2. main.ts に defaultPreload の設定を追加し、リンクにホバーしたときにコンソールを確認します

   1
   ...
   2
   
   3
   // Create a new router instance
   4
   const router = createRouter({
   5
     routeTree,
   6
     defaultPreload: "intent",
   7
     defaultNotFoundComponent: () => {
   8
       return (
   9
         <>
   10
           <div>ページが見つかりません</div>
   11
           <Link to="/">トップページへ</Link>
   12
         </>
   13
       );
   14
     },
   15
   });
   16
   
   17
   ...

それぞれの役割

• loaderDeps ・・・ searchパラメータを読み出してloaderにわたす
  • loaderでsearchパラメータが読めない理由 https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#using-search-params-in-loaders
• beforLoad ・・・ 認証のチェック、ルートのリダイレクト
• loader ・・・ データ取得とキャッシュ

staleTime

• https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#️-some-important-defaults
• preloadStaleTimeのデフォルトは30秒
• staleTime のデフォルトは0、つまりルート遷移後preloadされたデータが表示されたあと、常にloaderが走る。

TanStack Queryとの連携

1. TanStack Queryをインストール

   1
   npm i @tanstack/react-query

2. src/api/posts.ts ファイルを作成し、ダミーのデータ取得API呼び出しを作成します

   1
   import { queryOptions } from "@tanstack/react-query";
   2
   
   3
   const getPosts = async () => [
   4
     { id: 1, title: "title 1", body: "body 1" },
   5
     { id: 2, title: "title 2", body: "body 2" },
   6
     { id: 3, title: "title 3", body: "body 3" },
   7
   ];
   8
   
   9
   export const postsQueryOptions = queryOptions({
   10
     queryKey: ["posts"],
   11
     queryFn: getPosts,
   12
   });
   13
   
   14
   const getPost = async (id: number) => {
   15
     const data = await getPosts();
   16
     return data.find((x) => x.id === id);
   17
   };
   18
   
   19
   export const postQueryOptions = (postId: number) =>
   20
     queryOptions({
   21
       queryKey: ["post", postId],
   22
       queryFn: () => getPost(postId),
   23
     });

3. routes/__root.ts を開き、コンテクスト付きルートに変更します

   1
    import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
   2
    import type { QueryClient } from "@tanstack/react-query";
   3
    import { Header } from "../components/Header";
   4
    import { Footer } from "../components/Footer";
   5
   
   6
    type RouterContext = {
   7
      queryClient: QueryClient;
   8
    };
   9
   
   10
    export const Route = createRootRouteWithContext<RouterContext>()({
   11
      component: () => (
   12
        <div className="h-dvh flex flex-col">
   13
          <Header />
   14
         <div className="grow p-8 grid place-items-center overflow-scroll">
   15
            <Outlet />
   16
          </div>
   17
          <Footer />
   18
        </div>
   19
      ),
   20
    });

4. main.tsx を開き、クエリクライアントを初期化し、コンテクストに追加します

   • QueryClientProvider を追加していないことに留意

   1
   ...
   2
   
   3
   import { QueryClient } from "@tanstack/react-query";
   4
   
   5
   ...
   6
   
   7
   // Create a new router instance
   8
   const router = createRouter({
   9
     routeTree,
   10
     defaultPreload: "intent",
   11
     defaultNotFoundComponent: () => {
   12
       return (
   13
         <>
   14
           <div>ページが見つかりません</div>
   15
           <Link to="/">トップページへ</Link>
   16
         </>
   17
       );
   18
     },
   19
     context: {
   20
       queryClient: new QueryClient(),
   21
     },
   22
     defaultStaleTime: 0,
   23
     defaultPreloadStaleTime: 0,
   24
   });
   25
   
   26
   ...

5. routes/posts/index.tsx でpostsデータを読み出します

   1
   ...
   2
   
   3
   import { postsQueryOptions } from "../../api/posts";
   4
   
   5
   ...
   6
   
   7
   export const Route = createFileRoute("/posts/")({
   8
     loader: ({ context }) =>
   9
       context.queryClient.ensureQueryData(postsQueryOptions),
   10
     validateSearch: zodValidator(postsSearchParamsSchema),
   11
     component: RouteComponent,
   12
   });
   13
   
   14
   function RouteComponent() {
   15
     const { page } = Route.useSearch();
   16
     const data = Route.useLoaderData();
   17
   
   18
     return (
   19
       <div className="h-full grid place-items-center">
   20
         <ul>
   21
           {data.map((x) => (
   22
             <li>
   23
               <Link
   24
                 from="/posts"
   25
                 to="./$postId"
   26
                 params={{ postId: x.id.toString() }}
   27
               >
   28
                 {x.title}
   29
               </Link>
   30
             </li>
   31
           ))}
   32
         </ul>
   33
         <Link
   34
           from="/posts"
   35
           to="."
   36
           search={(prev) => ({
   37
             ...prev,
   38
             page: prev.page + 1,
   39
           })}
   40
         >
   41
           {page} 次のページへ
   42
         </Link>
   43
       </div>
   44
     );
   45
   }

6. 同様に routes/posts/$postId.tsx でpostデータを読み出します

   1
   import { createFileRoute, notFound } from "@tanstack/react-router";
   2
   
   3
   import { postQueryOptions } from "../../api/posts";
   4
   
   5
   export const Route = createFileRoute("/posts/$postId")({
   6
     loader: async ({ context, params }) => {
   7
       const data = await context.queryClient.ensureQueryData(
   8
         postQueryOptions(Number(params.postId)),
   9
       );
   10
       if (!data) throw notFound();
   11
       return data;
   12
     },
   13
     component: RouteComponent,
   14
     notFoundComponent: () => {
   15
       return <div>記事が見つかりません</div>;
   16
     },
   17
   });
   18
   
   19
   function RouteComponent() {
   20
     const { postId } = Route.useParams();
   21
     const data = Route.useLoaderData();
   22
     return (
   23
       <div>
   24
         Hello "/posts/{postId}"!
   25
         <h1>{data.title}</h1>
   26
         <h2>{data.body}</h2>
   27
       </div>
   28
     );
   29
   }

• ロード中とエラーの表示はそれぞれ pendingComponent、 errorComponent を使います

認証

1. src/api/auth.ts を作成しダミーの認証API呼び出しフックを作成します

   • Context - Provider を作成していないことに留意

   1
   import { useState } from "react";
   2
   
   3
   export const useAuth = () => {
   4
     const [isAuth, setIsAuth] = useState(false);
   5
   
   6
     const login = async () => {
   7
       setIsAuth(true);
   8
     };
   9
   
   10
     const logout = async () => {
   11
       setIsAuth(false);
   12
     };
   13
   
   14
     return {
   15
       isAuth,
   16
       login,
   17
       logout,
   18
     };
   19
   };
   20
   
   21
   export type Auth = ReturnType<typeof useAuth>;

2. routes/__root.tsx に Authの型を登録します

   1
   ...
   2
   
   3
   import type { Auth } from "../api/auth";
   4
   
   5
   type RouterContext = {
   6
     queryClient: QueryClient;
   7
     auth: Auth;
   8
   };
   9
   
   10
   ...

3. main.tsx で useAuth フックを呼び出しコンテクストに設定します

   1
   ...
   2
   
   3
   import { useAuth } from "./api/auth";
   4
   
   5
   ...
   6
   
   7
   // Create a new router instance
   8
   const router = createRouter({
   9
     routeTree,
   10
     defaultPreload: "intent",
   11
     defaultNotFoundComponent: () => {
   12
       return (
   13
         <>
   14
           <div>ページが見つかりません</div>
   15
           <Link to="/">トップページへ</Link>
   16
         </>
   17
       );
   18
     },
   19
     context: {
   20
       queryClient: new QueryClient(),
   21
       auth: undefined!,
   22
     },
   23
     defaultStaleTime: 0,
   24
   });
   25
   
   26
   ...
   27
   
   28
   const App = () => {
   29
     const auth = useAuth();
   30
     return <RouterProvider router={router} context={{ auth }} />;
   31
   };
   32
   
   33
   // Render the app
   34
   const rootElement = document.getElementById("app")!;
   35
   if (!rootElement.innerHTML) {
   36
     const root = ReactDOM.createRoot(rootElement);
   37
     root.render(
   38
       <StrictMode>
   39
         <App />
   40
       </StrictMode>,
   41
     );
   42
   }

4. routes/admin.tsx を作成し、beforeLoadで認証状態のチェックをします

   1
   import { createFileRoute, redirect } from "@tanstack/react-router";
   2
   
   3
   export const Route = createFileRoute("/admin")({
   4
     beforeLoad: ({ context, location }) => {
   5
       if (!context.auth.isAuth)
   6
         throw redirect({
   7
           to: "/login",
   8
           search: {
   9
             redirect: location.href,
   10
           },
   11
         });
   12
     },
   13
   });

   • componentを省略すると <Outlet /> をおいたのと同じになります

5. routes/login.tsx を作成します

   1
   import { createFileRoute } from "@tanstack/react-router";
   2
   
   3
   type Search = {
   4
     redirect?: string;
   5
   };
   6
   
   7
   export const Route = createFileRoute("/login")({
   8
     validateSearch: (search: Record<string, string>): Search => {
   9
       return {
   10
         redirect: search.redirect ?? "/",
   11
       };
   12
     },
   13
     loader: ({ context }) => {
   14
       return {
   15
         login: context.auth.login,
   16
       };
   17
     },
   18
     component: RouteComponent,
   19
   });
   20
   
   21
   function RouteComponent() {
   22
     const { login } = Route.useLoaderData();
   23
     const { redirect } = Route.useSearch();
   24
     const navigate = Route.useNavigate();
   25
   
   26
     return (
   27
       <div>
   28
         <div>Hello "/login"!</div>
   29
         <button
   30
           className="btn btn-outline"
   31
           type="button"
   32
           onClick={async () => {
   33
             await login();
   34
             navigate({ to: redirect });
   35
           }}
   36
         >
   37
           login
   38
         </button>
   39
       </div>
   40
     );
   41
   }

6. localhost:3000/admin にアクセスし、 login にリダイレクトされることを確認します。

7. routes/admin/index.tsx を作成します

   1
   import { createFileRoute } from "@tanstack/react-router";
   2
   
   3
   export const Route = createFileRoute("/admin/")({
   4
     component: RouteComponent,
   5
     loader: ({ context }) => {
   6
       return {
   7
         logout: context.auth.logout,
   8
       };
   9
     },
   10
   });
   11
   
   12
   function RouteComponent() {
   13
     const { logout } = Route.useLoaderData();
   14
     const navigate = Route.useNavigate();
   15
   
   16
     return (
   17
       <div>
   18
         <div>Hello "/admin/"!</div>
   19
         <button
   20
           type="button"
   21
           className="btn btn-outline"
   22
           onClick={async () => {
   23
             await logout();
   24
             navigate({ to: "/login", search: {redirect: "/admin"} });
   25
           }}
   26
         >
   27
           logout
   28
         </button>
   29
       </div>
   30
     );
   31
   }

8. ログイン・ログアウトが動作することを確認します

その他の便利な機能

スクロール位置の復元

createRouterの scrollRestoration を使います。

1. main.tsx を開き、scrollRestoration オプションを足します

   1
   ...
   2
   
   3
   // Create a new router instance
   4
   const router = createRouter({
   5
     routeTree,
   6
     scrollRestoration: true,
   7
     defaultPreload: "intent",
   8
     defaultNotFoundComponent: () => {
   9
       return (
   10
         <>
   11
           <div>ページが見つかりません</div>
   12
           <Link to="/">トップページへ</Link>
   13
         </>
   14
       );
   15
     },
   16
     context: {
   17
       queryClient: new QueryClient(),
   18
       auth: undefined!,
   19
     },
   20
     defaultStaleTime: 0,
   21
   });
   22
   
   23
   ...

Navigation Blocking

ページ遷移の前に確認ダイアログを挟むことができます

1. routes/index.tsx をひらき、useBlocker フックを追加します

   1
    import { createFileRoute, useBlocker } from "@tanstack/react-router";
   2
   
   3
    export const Route = createFileRoute("/")({
   4
      component: App,
   5
    });
   6
   
   7
    function App() {
   8
      useBlocker({
   9
        shouldBlockFn: () => {
   10
          const shouldLeave = confirm("Are you sure you want to leave?");
   11
          return !shouldLeave;
   12
        },
   13
      });
   14
      return <div className="text-center">This is top route</div>;
   15
    }

Eslintルール

https://tanstack.com/router/latest/docs/eslint/eslint-plugin-router

DevTools

https://tanstack.com/router/latest/docs/framework/react/devtools#devtools