Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 17 additions & 31 deletions docs/react-router-v7/api/components/Await.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,6 @@ title: Await

# Await

<!--
⚠️ ⚠️ IMPORTANT ⚠️ ⚠️

Thank you for helping improve our documentation!

This file is auto-generated from the JSDoc comments in the source
code, so please edit the JSDoc comments in the file below and this
file will be re-generated once those changes are merged.

https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/components.tsx
-->

[MODES: framework, data]

## 概要
Expand All @@ -30,12 +18,10 @@ https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/co
import { Await, useLoaderData } from "react-router";

export async function loader() {
// await されない
// not awaited
const reviews = getReviews();
// await される (トランジションをブロックする)
const book = await fetch("/api/book").then((res) =>
res.json()
);
// awaited (blocks the transition)
const book = await fetch("/api/book").then((res) => res.json());
return { book, reviews };
}

Expand All @@ -49,7 +35,7 @@ function Book() {
<Await
resolve={reviews}
errorElement={
<div>レビューをロードできませんでした 😬</div>
<div>Could not load reviews 😬</div>
}
children={(resolvedReviews) => (
<Reviews items={resolvedReviews} />
Expand Down Expand Up @@ -83,12 +69,12 @@ function Await<Resolve>({
</Await>
```

React 要素を使用する場合、[useAsyncValue](../hooks/useAsyncValue) が解決された値を提供します。
React 要素を使用する場合、[`useAsyncValue`](../hooks/useAsyncValue) が解決された値を提供します。

```tsx [2]
<Await resolve={reviewsPromise}>
<Reviews />
</Await>;
</Await>

function Reviews() {
const resolvedReviews = useAsyncValue();
Expand All @@ -98,55 +84,55 @@ function Reviews() {

### errorElement

[`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) がリジェクトされた場合、children の代わりにエラー要素がレンダリングされます。
[`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) がリジェクトされた場合、`children` の代わりにエラー要素がレンダリングされます。

```tsx
<Await
errorElement={<div>おっと</div>}
errorElement={<div>Oops</div>}
resolve={reviewsPromise}
>
<Reviews />
</Await>
```

よりコンテキストに沿ったエラーを提供するには、子コンポーネントで [useAsyncError](../hooks/useAsyncError) を使用できます。
よりコンテキストに沿ったエラーを提供するには、子コンポーネントで [`useAsyncError`](../hooks/useAsyncError) を使用できます。

```tsx
<Await
errorElement={<ReviewsError />}
resolve={reviewsPromise}
>
<Reviews />
</Await>;
</Await>

function ReviewsError() {
const error = useAsyncError();
return <div>レビューのロード中にエラーが発生しました: {error.message}</div>;
return <div>Error loading reviews: {error.message}</div>;
}
```

errorElement を提供しない場合、リジェクトされた値は最も近いルートレベルの [`ErrorBoundary`](../../start/framework/route-module#errorboundary) までバブルアップし、[useRouteError](../hooks/useRouteError) フックを介してアクセスできます
errorElement を提供しない場合、リジェクトされた値は最も近いルートレベルの [`ErrorBoundary`](../../start/framework/route-module#errorboundary) までバブルアップし、[`useRouteError`](../hooks/useRouteError) hook を介してアクセスできます

### resolve

解決してレンダリングするために、[`loader`](../../start/framework/route-module#loader) から返された [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) を受け取ります。
[`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) を受け取ります。これは、解決およびレンダリングされる [`loader`](../../start/framework/route-module#loader) から返されたものです

```tsx
import { Await, useLoaderData } from "react-router";

export async function loader() {
let reviews = getReviews(); // await されない
let reviews = getReviews(); // not awaited
let book = await getBook();
return {
book,
reviews, // これは Promise です
reviews, // this is a promise
};
}

export default function Book() {
const {
book,
reviews, // これは同じ Promise です
reviews, // this is the same promise
} = useLoaderData();

return (
Expand All @@ -155,7 +141,7 @@ export default function Book() {
<p>{book.description}</p>
<React.Suspense fallback={<ReviewsSkeleton />}>
<Await
// そして、これは Await に渡す Promise です
// and is the promise we pass to Await
resolve={reviews}
>
<Reviews />
Expand Down
74 changes: 23 additions & 51 deletions docs/react-router-v7/api/components/Form.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,17 @@ title: Form

# Form

<!--
⚠️ ⚠️ 重要 ⚠️ ⚠️

ドキュメントの改善にご協力いただきありがとうございます!

このファイルはソースコード内のJSDocコメントから自動生成されています。そのため、以下のファイルのJSDocコメントを編集してください。変更がマージされると、このファイルは再生成されます。

https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/dom/lib.tsx
-->

[MODES: framework, data]

## 概要

[リファレンスドキュメント ↗](https://api.reactrouter.com/v7/functions/react_router.Form.html)

[`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) を介してアクションにデータを送信する、プログレッシブエンハンスメントされた HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) です。[`useNavigation`](../hooks/useNavigation) で保留状態をアクティブにし、基本的な HTML フォームを超える高度なユーザーインターフェースを可能にします。フォームのアクションが完了すると、ページ上のすべてのデータが自動的に再検証され、UI がデータと同期されます。
[`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) を介してアクションにデータを送信する、プログレッシブエンハンスメントされた HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) です。[`useNavigation`](../hooks/useNavigation) で保留状態をアクティブにし、基本的な HTML [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) を超える高度なユーザーインターフェースを可能にします。フォームの `action` が完了すると、ページ上のすべてのデータが自動的に再検証され、UI がデータと同期されます。

HTML フォーム API を使用しているため、サーバーでレンダリングされたページは、JavaScript がロードされる前に基本的なレベルでインタラクティブになります。React Router が送信を管理する代わりに、ブラウザが送信と保留状態(回転する favicon など)を管理します。JavaScript がロードされると、React Router が引き継ぎ、Web アプリケーションのユーザーエクスペリエンスを可能にします。

Form は、URL を変更したり、ブラウザの [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) スタックにエントリを追加したりする必要がある送信に最も役立ちます。ブラウザの [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) スタックを操作する必要がないフォームの場合は、[`<fetcher.Form>`](https://api.reactrouter.com/v7/types/react_router.FetcherWithComponents.html#Form) を使用してください。
`Form` は、URL を変更したり、ブラウザの履歴スタックにエントリを追加したりする必要がある送信に最も役立ちます。ブラウザの[`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) スタックを操作する必要がないフォームの場合は、[`<fetcher.Form>`](https://api.reactrouter.com/v7/types/react_router.FetcherWithComponents.html#Form) を使用してください。

```tsx
import { Form } from "react-router";
Expand All @@ -43,95 +33,77 @@ function NewEvent() {

### action

[modes: framework, data]

フォームデータを送信する URL。`undefined` の場合、これはコンテキスト内の最も近いルートにデフォルト設定されます。

### discover

[modes: framework, data]
フォームの[遅延ルートディスカバリ](../../explanation/lazy-route-discovery)の動作を定義します。

リンクの検出動作を定義します。[`DiscoverBehavior`](https://api.reactrouter.com/v7/types/react_router.DiscoverBehavior.html) を参照してください。
- **render** — デフォルトでは、フォームがレンダーされたときにルートをディスカバリします。
- **none** — 先行してディスカバリせず、フォームが送信された場合にのみディスカバリします。

```tsx
<Link /> // default ("render")
<Link discover="render" />
<Link discover="none" />
<Form /> // default ("render")
<Form discover="render" />
<Form discover="none" />
```

- **render** — デフォルト。リンクがレンダリングされたときにルートを検出します。
- **none** — 積極的に検出せず、リンクがクリックされた場合にのみ検出します。

### encType

[modes: framework, data]

フォームの送信に使用するエンコードタイプ。

```tsx
<Form encType="application/x-www-form-urlencoded"/> // デフォルト
<Form encType="application/x-www-form-urlencoded"/> // Default
<Form encType="multipart/form-data"/>
<Form encType="text/plain"/>
```

### fetcherKey

[modes: framework, data]

`navigate={false}` を使用する場合に使用する特定の fetcherKey を示します。これにより、[useFetcher](../hooks/useFetcher) の別のコンポーネントで fetcher の状態を取得できます。
`navigate={false}` を使用する場合に使用する特定の fetcherKey を示します。これにより、[`useFetcher`](../hooks/useFetcher) の別のコンポーネントで fetcher の状態を取得できます。

### method

[modes: framework, data]

フォームの送信に使用する HTTP 動詞。`"delete"`、`"get"`、`"patch"`、`"post"`、`"put"` をサポートします。
フォームが送信されたときに使用する HTTP 動詞。`"delete"`、`"get"`、`"patch"`、`"post"`、および `"put"` をサポートします。

ネイティブの [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) は `"get"` と `"post"` のみをサポートします。プログレッシブエンハンスメントをサポートする場合は、他の動詞を避けてください。

### navigate

[modes: framework, data]

`false` の場合、ナビゲーションをスキップし、内部的に fetcher を介して送信します。これは基本的に [`useFetcher`](../hooks/useFetcher) + `<fetcher.Form>` の省略形であり、このコンポーネントで結果のデータを気にしません。

### onSubmit

[modes: framework, data]

フォームが送信されたときに呼び出す関数。[`event.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) を呼び出すと、このフォームは何もしません。

### preventScrollReset

[modes: framework, data]

<ScrollRestoration> コンポーネントを使用している場合、ナビゲーションの完了時にスクロール位置がビューポートの先頭にリセットされるのを防ぎます。

### relative

[modes: framework, data]

フォームのアクションがルート階層に対して相対的か、パス名に対して相対的かを決定します。ルート階層のナビゲーションをオプトアウトし、代わりに /- 区切りの URL セグメントに基づいてルーティングする場合は、これを使用します。[`RelativeRoutingType`](https://api.reactrouter.com/v7/types/react_router.RelativeRoutingType.html) を参照してください。
フォームのアクションがルート階層に対して相対的か、パス名に対して相対的かを決定します。ルート階層のナビゲーションをオプトアウトし、代わりにスラッシュ区切りの URL セグメントに基づいてルーティングする場合は、これを使用します。[`RelativeRoutingType`](https://api.reactrouter.com/v7/types/react_router.RelativeRoutingType.html) を参照してください。

### reloadDocument

[modes: framework, data]

クライアント側のルーティング + データフェッチの代わりに、完全なドキュメントナビゲーションを強制します。
クライアント側のルーティングとデータフェッチの代わりに、完全なドキュメントナビゲーションを強制します。

### replace

[modes: framework, data]

フォームがナビゲートするときに、ブラウザの [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) スタック内の現在のエントリを置き換えます。ユーザーがフォームのあるページに「戻る」ことができないようにする場合は、これを使用します。
フォームがナビゲートするときに、ブラウザの[`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) スタック内の現在のエントリを置き換えます。ユーザーがフォームのあるページに「戻る」ことができないようにする場合は、これを使用します。

### state

[modes: framework, data]

このナビゲーションの [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) スタックエントリに追加する状態オブジェクト
このナビゲーションの[`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) スタックエントリに追加する状態オブジェクト

### viewTransition

[modes: framework, data]
このナビゲーションの [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) を有効にします。トランジション中に特定のスタイルを適用するには、[`useViewTransitionState`](../hooks/useViewTransitionState) を参照してください。

### unstable_defaultShouldRevalidate

この送信後のデフォルトの再検証動作を指定します。

アクティブなルートに `shouldRevalidate` 関数が存在しない場合、この値が直接使用されます。そうでない場合は、`shouldRevalidate` に渡され、ルートが再検証に関する最終決定を行うことができます。これは、検索パラメーターを更新する際に再検証をトリガーしたくない場合に役立ちます。

このナビゲーションの [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) を有効にします。トランジション中に特定のスタイルを適用するには、[`useViewTransitionState`](../hooks/useViewTransitionState) を参照してください
デフォルトでは(指定しない場合)、loader はルーターの標準的な再検証動作に従って再検証されます
34 changes: 24 additions & 10 deletions docs/react-router-v7/api/components/Link.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,17 @@ import { Link } from "react-router";

[modes: framework]

リンクの検出動作を定義します。
リンクの[遅延ルートディスカバリ](../../explanation/lazy-route-discovery)動作を定義します。

- **render** - デフォルト。リンクのレンダリング時にルートを検出します。
- **none** - 積極的に検出せず、リンクがクリックされた場合にのみ検出します。

```tsx
<Link /> // default ("render")
<Link discover="render" />
<Link discover="none" />
```

- **render** - デフォルト。リンクのレンダリング時にルートを検出します。
- **none** - 積極的に検出せず、リンクがクリックされた場合にのみ検出します。

### prefetch

[modes: framework]
Expand Down Expand Up @@ -96,10 +96,10 @@ import { Link } from "react-router";

親ルートパターンが "blog" で、子ルートパターンが "blog/:slug/edit" であるルート階層を考えてみましょう。

- **route** - デフォルト。ルートパターンを基準にしてリンクを解決します。上記の例では、`"..."` の相対リンクは、`:slug/edit` セグメントの両方を削除して "/blog" に戻ります。
- **path** - パスを基準にするため、`"..."` は1つのURLセグメントのみを削除して "/blog/:slug" に戻ります。
- **route** - デフォルト。ルートパターンを基準にしてリンクを解決します。上記の例では、`"..."` の相対リンクは、`:slug/edit` セグメントの両方を削除して `"/blog"` に戻ります。
- **path** - パスを基準にするため、`"..."` は1つのURLセグメントのみを削除して `"/blog/:slug"` に戻ります。

インデックスルートとレイアウト ルートにはパスがないため、相対パスの計算には含まれないことに注意してください
なお、インデックスルートとレイアウトルートにはパスがないため、相対パスの計算には含まれません

### reloadDocument

Expand All @@ -115,7 +115,7 @@ import { Link } from "react-router";

[modes: framework, data, declarative]

履歴スタックに新しいエントリをプッシュする代わりに、[`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) スタックの現在のエントリを置き換えます
[`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) スタックに新しいエントリをプッシュする代わりに、現在のエントリを置き換えます

```tsx
<Link replace />
Expand Down Expand Up @@ -168,7 +168,7 @@ function SomeComp() {
search: "?query=string",
hash: "#hash",
}}
/>
/>;
```

### viewTransition
Expand All @@ -183,4 +183,18 @@ function SomeComp() {
</Link>
```

トランジションに特定のスタイルを適用するには、[`useViewTransitionState`](../hooks/useViewTransitionState) を参照してください。
トランジションに特定のスタイルを適用するには、[`useViewTransitionState`](../hooks/useViewTransitionState) を参照してください。

### unstable_defaultShouldRevalidate

[modes: framework, data, declarative]

ナビゲーションのデフォルトの再検証動作を指定します。

```tsx
<Link to="/some/path" unstable_defaultShouldRevalidate={false} />
```

アクティブルートに `shouldRevalidate` 関数がない場合、この値が直接使用されます。それ以外の場合は、`shouldRevalidate` に渡され、ルートが再検証の最終的な決定を下すことができます。これは、検索パラメーターを更新する際に、再検証をトリガーしたくない場合に役立ちます。

デフォルトでは(指定しない場合)、loader はルーターの標準的な再検証動作に従って再検証されます。
Loading