Open2024/09/12にコメント追加5

Tanstack Router 探訪

Quick Start に則ってセットアップを行う。

npm i @tanstack/react-router
npm i -D @tanstack/router-plugin @tanstack/router-devtools

vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import viteReact from '@vitejs/plugin-react'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'

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

main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import { RouterProvider, createRouter } from '@tanstack/react-router'

import { routeTree } from './routeTree.gen.ts'

const router = createRouter({routeTree })

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

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    {/* <App /> */}
    {/*ルーティングに Tanstack Router を使用*/}
    <RouterProvider router={router} />
  </StrictMode>,
)

ホームページと About ページを作成するが、クイックスタートの通りに Code Splitting しておく。

src/routes/index.lazy.tsx

import { createLazyFileRoute } from '@tanstack/react-router'

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

function Index() {
  return (
    <div>
      <h1>Index Page</h1>
    </div>
  )
}

src/routes/about.lazy.tsx

import { createLazyFileRoute } from '@tanstack/react-router'

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

function About() {
  return (
    <div>
      <h1>About Page</h1>
    </div>
  )
}

__root.tsx ファイルを作成する。

src/routes/__root.tsx

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

export const Route = createRootRoute({
  component: () => (
    <>
      <div className="text-red-500 font-bold text-xl">Routeですよ</div>
      <div className="flex gap-2">
        <Link to="/" className="[&.active]:text-blue-700">
          Home
        </Link>
        <Link to="/about" className="[&.active]:text-blue-700">
          About
        </Link>

      </div>
      <Outlet />
    </>
  )
})

mytty

Type Safe であることを確認。Type Safe なの本当にありがたいな。

mytty

DevTools の追加

__root.tsx

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

export const Route = createRootRoute({
  component: () => (
    <>
      <div className="text-red-500 font-bold text-xl">Routeですよ</div>
      <div className="flex gap-2">
        <Link to="/" className="[&.active]:text-blue-700">
          Home
        </Link>
        <Link to="/about" className="[&.active]:text-blue-700">
          About
        </Link>

      </div>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  )
})

mytty