---
title: React Router
description: "React RouterのプロジェクトにYamada UIをインストールして使用するためのガイド。"
---
## インストール
### アプリケーションを作成する
React Routerのアプリケーションを作成します。
```bash
pnpm create react-router my-app
```
```bash
npx create-react-router my-app
```
```bash
yarn create react-router my-app
```
```bash
bun create react-router 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`を追加します。
ハイドレーションエラーを抑制するために、`html`と`body`に`suppressHydrationWarning`を`true`に設定します。
```tsx
import { Meta, Outlet, Scripts, ScrollRestoration } from "react-router"
import { UIProvider } from "@workspaces/ui"
export function Layout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
export default function App() {
return
}
```
### コンポーネントを使用する
`UIProvider`を追加したら、アプリケーション内でコンポーネントを使用します。
```tsx
import { Button } from "@workspaces/ui"
export default function Home() {
return
}
```
これで、Yamada UIのセットアップは完了です！
## スクリプト
### ColorModeScript
[カラーモード](https://yamada-ui.com/docs/theming/color-mode.md)を使用する場合は、正常に動作させるために`body`に`ColorModeScript`を追加する必要があります。
理由は、カラーモードが`localStorage`や`cookies`を用いて実装されており、ページの読み込み時に同期を正しく機能させるためです。
```tsx
import {
data,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useRouteLoaderData,
} from "react-router"
import { ColorModeScript, UIProvider } from "@workspaces/ui"
import type { Route } from "./+types/root"
export async function loader({ request }: Route.LoaderArgs) {
const cookie = request.headers.get("cookie") ?? ""
return data({ cookie })
}
export function Layout({ children }: { children: React.ReactNode }) {
const { cookie } = useRouteLoaderData("root")
return (
{children}
)
}
export default function App() {
return
}
```
もし、[コンフィグ](https://yamada-ui.com/docs/theming/configuration/overview.md)の`defaultColorMode`を変更した場合は、`ColorModeScript`に`defaultValue`を設定します。
```tsx
import {
data,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useRouteLoaderData,
} from "react-router"
import { ColorModeScript, UIProvider } from "@workspaces/ui"
import type { Route } from "./+types/root"
import { config } from "@workspace/theme"
export async function loader({ request }: Route.LoaderArgs) {
const cookie = request.headers.get("cookie") ?? ""
return data({ cookie })
}
export function Layout({ children }: { children: React.ReactNode }) {
const { cookie } = useRouteLoaderData("root")
return (
{children}
)
}
export default function App() {
return
}
```
### ThemeSchemeScript
テーマスキームによる画面のフラッシュを抑制したい場合は、`body`内に`ThemeSchemeScript`を追加します。
テーマスキームは`localStorage`や`cookies`を用いて実装されており、`ThemeSchemeScript`を追加することでページの読み込み時に同期を正しく機能させることができます。
```tsx
import {
data,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useRouteLoaderData,
} from "react-router"
import { ThemeSchemeScript, UIProvider } from "@workspaces/ui"
import type { Route } from "./+types/root"
export async function loader({ request }: Route.LoaderArgs) {
const cookie = request.headers.get("cookie") ?? ""
return data({ cookie })
}
export function Layout({ children }: { children: React.ReactNode }) {
const { cookie } = useRouteLoaderData("root")
return (
{children}
)
}
export default function App() {
return
}
```
もし、[コンフィグ](https://yamada-ui.com/docs/theming/configuration/overview.md)の`defaultThemeScheme`を変更した場合は、`ThemeSchemeScript`に`defaultValue`を設定します。
```tsx
import {
data,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useRouteLoaderData,
} from "react-router"
import { ThemeSchemeScript, UIProvider } from "@workspaces/ui"
import type { Route } from "./+types/root"
import { config } from "@workspace/theme"
export async function loader({ request }: Route.LoaderArgs) {
const cookie = request.headers.get("cookie") ?? ""
return data({ cookie })
}
export function Layout({ children }: { children: React.ReactNode }) {
const { cookie } = useRouteLoaderData("root")
return (
{children}
)
}
export default function App() {
return
}
```