--- title: TanStack Router description: "TanStack RouterのプロジェクトにYamada UIをインストールして使用するためのガイド。" --- # TanStack Router TanStack RouterのプロジェクトにYamada UIをインストールして使用するためのガイド。 ## インストール ### アプリケーションを作成する TanStack Routerのアプリケーションを作成します。 ```bash pnpm dlx create-tsrouter-app my-app ``` ```bash npx create-tsrouter-app my-app ``` ```bash yarn dlx create-tsrouter-app my-app ``` ```bash bunx create-tsrouter-app my-app ``` ### セットアップするコマンドを実行すると、プロジェクトに必要なファイルやフォルダが作成されます。 ```bash pnpm dlx @yamada-ui/cli init ``` ```bash npx @yamada-ui/cli init ``` ```bash yarn dlx @yamada-ui/cli init ``` ```bash bunx @yamada-ui/cli init ``` ### パッケージをインストールするアプリケーションに`@workspaces/ui`をインストールします。 ```bash pnpm add "@workspaces/ui@workspace:*" ``` ```bash npm install "@workspaces/ui@workspace:*" ``` ```bash yarn add "@workspaces/ui@workspace:*" ``` ```bash bun add "@workspaces/ui@workspace:*" ``` ### プロバイダーを追加するインストール後、アプリケーションのルートに`UIProvider`を追加します。 ```tsx import ReactDOM from "react-dom/client" import { RouterProvider, createRouter } from "@tanstack/react-router" import { routeTree } from "./routeTree.gen" import { UIProvider } from "@workspaces/ui" const router = createRouter({ routeTree, defaultPreload: "intent", scrollRestoration: true, }) declare module "@tanstack/react-router" { interface Register { router: typeof router } } const rootElement = document.getElementById("app")! if (!rootElement.innerHTML) { const root = ReactDOM.createRoot(rootElement) root.render( , ) } ``` ### コンポーネントを使用する `UIProvider`を追加したら、アプリケーション内でコンポーネントを使用します。 ```tsx import { createFileRoute } from "@tanstack/react-router" import { Button } from "@workspaces/ui" export const Route = createFileRoute("/")({ component: App }) function App() { return } ``` これで、Yamada UIのセットアップは完了です！ ## スクリプト ### ColorModeScript [カラーモード](https://yamada-ui.com/docs/theming/color-mode.md)を使用する場合は、正常に動作させるために`body`に`ColorModeScript`を追加する必要があります。理由は、カラーモードが`localStorage`や`cookies`を用いて実装されており、ページの読み込み時に同期を正しく機能させるためです。 ```tsx title="vite.config.ts" {2,7,9-21,29} import viteReact from "@vitejs/plugin-react" import type { Plugin } from "vite" import { defineConfig } from "vite" import tsconfigPaths from "vite-tsconfig-paths" import { devtools } from "@tanstack/devtools-vite" import { tanstackRouter } from "@tanstack/router-plugin/vite" import { COLOR_MODE_STORAGE_KEY, getStorageScript } from "@workspaces/ui" function injectColorModeScript(): Plugin { return { name: "inject-color-mode-script", transformIndexHtml(html) { const content = getStorageScript( "colorMode", COLOR_MODE_STORAGE_KEY, )({ defaultValue: "light" }) return html.replace("", ``) }, } } const config = defineConfig({ plugins: [ devtools(), tsconfigPaths({ projects: ["./tsconfig.json"] }), tanstackRouter({ target: "react", autoCodeSplitting: true }), viteReact(), injectColorModeScript(), ], }) export default config ``` もし、[コンフィグ](https://yamada-ui.com/docs/theming/configuration/overview.md)の`defaultColorMode`を変更した場合は、`ColorModeScript`に`defaultValue`を設定します。 ```tsx title="vite.config.ts" {8,17} import viteReact from "@vitejs/plugin-react" import type { Plugin } from "vite" import { defineConfig } from "vite" import tsconfigPaths from "vite-tsconfig-paths" import { devtools } from "@tanstack/devtools-vite" import { tanstackRouter } from "@tanstack/router-plugin/vite" import { COLOR_MODE_STORAGE_KEY, getStorageScript } from "@workspaces/ui" import { config as themeConfig } from "@workspaces/theme" function injectColorModeScript(): Plugin { return { name: "inject-color-mode-script", transformIndexHtml(html) { const content = getStorageScript( "colorMode", COLOR_MODE_STORAGE_KEY, )({ defaultValue: themeConfig.defaultColorMode }) return html.replace("", ``) }, } } const config = defineConfig({ plugins: [ devtools(), tsconfigPaths({ projects: ["./tsconfig.json"] }), tanstackRouter({ target: "react", autoCodeSplitting: true }), viteReact(), injectColorModeScript(), ], }) export default config ``` ### ThemeSchemeScript [テーマの切り替え](https://yamada-ui.com/docs/theming/switching-themes.md)を使用する場合は、正常に動作させるために`body`に`ThemeSchemeScript`を追加する必要があります。理由は、テーマの切り替えが`localStorage`や`cookies`を用いて実装されており、ページの読み込み時に同期を正しく機能させるためです。 ```tsx title="vite.config.ts" {2,7,9-21,29} import viteReact from "@vitejs/plugin-react" import type { Plugin } from "vite" import { defineConfig } from "vite" import tsconfigPaths from "vite-tsconfig-paths" import { devtools } from "@tanstack/devtools-vite" import { tanstackRouter } from "@tanstack/router-plugin/vite" import { THEME_SCHEME_STORAGE_KEY, getStorageScript } from "@workspaces/ui" function injectThemeSchemeScript(): Plugin { return { name: "inject-theme-scheme-script", transformIndexHtml(html) { const content = getStorageScript( "themeScheme", THEME_SCHEME_STORAGE_KEY, )({ defaultValue: "base" }) return html.replace("", ``) }, } } const config = defineConfig({ plugins: [ devtools(), tsconfigPaths({ projects: ["./tsconfig.json"] }), tanstackRouter({ target: "react", autoCodeSplitting: true }), viteReact(), injectThemeSchemeScript(), ], }) export default config ``` もし、[コンフィグ](https://yamada-ui.com/docs/theming/configuration/overview.md)の`defaultThemeScheme`を変更した場合は、`ThemeSchemeScript`に`defaultValue`を設定します。 ```tsx title="vite.config.ts" {8,17} import viteReact from "@vitejs/plugin-react" import type { Plugin } from "vite" import { defineConfig } from "vite" import tsconfigPaths from "vite-tsconfig-paths" import { devtools } from "@tanstack/devtools-vite" import { tanstackRouter } from "@tanstack/router-plugin/vite" import { THEME_SCHEME_STORAGE_KEY, getStorageScript } from "@workspaces/ui" import { config as themeConfig } from "@workspaces/theme" function injectThemeSchemeScript(): Plugin { return { name: "inject-theme-scheme-script", transformIndexHtml(html) { const content = getStorageScript( "themeScheme", THEME_SCHEME_STORAGE_KEY, )({ defaultValue: themeConfig.defaultThemeScheme }) return html.replace("", ``) }, } } const config = defineConfig({ plugins: [ devtools(), tsconfigPaths({ projects: ["./tsconfig.json"] }), tanstackRouter({ target: "react", autoCodeSplitting: true }), viteReact(), injectThemeSchemeScript(), ], }) export default config ``` ## コンポーネントの統合 TanStack Routerの[Link](https://tanstack.com/router/latest/docs/guide/navigation#link-component)などのコンポーネントとYamada UIのコンポーネントを統合することができます。 ### Link ```tsx import type { LinkComponent } from "@tanstack/react-router" import { createLink } from "@tanstack/react-router" import { Button, IconButton, Link } from "@workspaces/ui" const CreatedLink = createLink(Link) export const RouterLink: LinkComponent = (props) => { return } const CreatedLinkButton = createLink(Button) export const RouterLinkButton: LinkComponent = ( props, ) => { return } const CreatedLinkIconButton = createLink(IconButton) export const RouterLinkIconButton: LinkComponent< typeof CreatedLinkIconButton > = (props) => { return } ```