Vite + TanStack Router - 1. セットアップ

1
import { defineConfig } from "vite";
2
import react from "@vitejs/plugin-react-swc";
3
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
4

5
// https://vite.dev/config/
6
export default defineConfig({
7
  plugins: [
8
    react(),
9
    TanStackRouterVite()
10
  ],
11
});

1
import * as React from 'react'
2
import { Outlet, createRootRoute } from '@tanstack/react-router'
3

4
export const Route = createRootRoute({
5
  component: RootComponent,
6
})
7

8
function RootComponent() {
9
  return (
10
    <React.Fragment>
11
      <div>Hello "__root"!</div>
12
      <Outlet />
13
    </React.Fragment>
14
  )
15
}

1
import "./App.css";
2
import { RouterProvider, createRouter } from "@tanstack/react-router";
3
import { routeTree } from "./routeTree.gen"; // 自動生成されるファイル
4

5
const router = createRouter({ routeTree });
6

7
declare module "@tanstack/react-router" {
8
  interface Register {
9
    router: typeof router;
10
  }
11
}
12

13
function App() {
14
  return (
15
    <RouterProvider router={router} />
16
  );
17
}
18

19
export default App;

1
import { createFileRoute } from '@tanstack/react-router'
2

3
export const Route = createFileRoute('/')({
4
  component: RouteComponent,
5
})
6

7
function RouteComponent() {
8
  return <div>Hello "/"!</div>
9
}