From a22c88e77beb3067dc9c3758239540f35d1f7878 Mon Sep 17 00:00:00 2001 From: coji Date: Sun, 11 Jan 2026 18:48:23 +0900 Subject: [PATCH] docs(react-router-v7): update Japanese translations to latest Update 143 files with latest translations from upstream documentation. Co-Authored-By: Claude Opus 4.5 --- docs/react-router-v7/api/components/Await.md | 48 +- docs/react-router-v7/api/components/Form.md | 74 +-- docs/react-router-v7/api/components/Link.md | 34 +- docs/react-router-v7/api/components/Links.md | 20 +- docs/react-router-v7/api/components/Meta.md | 14 +- .../react-router-v7/api/components/NavLink.md | 56 +- .../api/components/Navigate.md | 31 +- .../api/components/PrefetchPageLinks.md | 22 +- docs/react-router-v7/api/components/Route.md | 46 +- docs/react-router-v7/api/components/Routes.md | 16 +- .../react-router-v7/api/components/Scripts.md | 4 +- .../api/components/ScrollRestoration.md | 24 +- .../api/data-routers/RouterProvider.md | 55 +- .../api/data-routers/StaticRouterProvider.md | 10 +- .../api/data-routers/createBrowserRouter.md | 280 ++++----- .../api/data-routers/createHashRouter.md | 265 +++----- .../api/data-routers/createMemoryRouter.md | 94 ++- .../api/data-routers/createStaticHandler.md | 19 +- .../api/data-routers/createStaticRouter.md | 22 +- .../api/declarative-routers/BrowserRouter.md | 25 +- .../api/declarative-routers/HashRouter.md | 37 +- .../api/declarative-routers/HistoryRouter.md | 29 +- .../api/declarative-routers/MemoryRouter.md | 21 +- .../api/declarative-routers/Router.md | 39 +- .../api/declarative-routers/StaticRouter.md | 20 +- .../framework-conventions/client-modules.md | 18 +- .../framework-conventions/entry.client.tsx.md | 10 +- .../framework-conventions/entry.server.tsx.md | 65 +- .../react-router.config.ts.md | 70 +-- .../api/framework-conventions/root.tsx.md | 40 +- .../api/framework-conventions/routes.ts.md | 20 +- .../framework-conventions/server-modules.md | 18 +- .../api/framework-routers/HydratedRouter.md | 17 +- .../api/framework-routers/ServerRouter.md | 18 +- .../api/hooks/useActionData.md | 24 +- .../api/hooks/useAsyncError.md | 14 +- .../api/hooks/useAsyncValue.md | 12 - .../api/hooks/useBeforeUnload.md | 14 +- docs/react-router-v7/api/hooks/useBlocker.md | 42 +- docs/react-router-v7/api/hooks/useFetcher.md | 23 +- docs/react-router-v7/api/hooks/useFetchers.md | 2 +- .../api/hooks/useFormAction.md | 22 +- docs/react-router-v7/api/hooks/useHref.md | 20 +- .../api/hooks/useInRouterContext.md | 18 +- .../api/hooks/useLinkClickHandler.md | 30 +- .../api/hooks/useLoaderData.md | 12 - docs/react-router-v7/api/hooks/useLocation.md | 2 +- docs/react-router-v7/api/hooks/useMatch.md | 17 +- docs/react-router-v7/api/hooks/useMatches.md | 12 - docs/react-router-v7/api/hooks/useNavigate.md | 64 +- .../api/hooks/useNavigation.md | 6 +- .../api/hooks/useNavigationType.md | 14 +- docs/react-router-v7/api/hooks/useOutlet.md | 14 +- .../api/hooks/useOutletContext.md | 26 +- docs/react-router-v7/api/hooks/useParams.md | 30 +- docs/react-router-v7/api/hooks/usePrompt.md | 14 +- .../api/hooks/useResolvedPath.md | 16 +- .../api/hooks/useRevalidator.md | 18 +- .../api/hooks/useRouteError.md | 12 - .../api/hooks/useRouteLoaderData.md | 20 +- docs/react-router-v7/api/hooks/useRoutes.md | 19 +- .../api/hooks/useSearchParams.md | 34 +- docs/react-router-v7/api/hooks/useSubmit.md | 14 +- .../api/hooks/useViewTransitionState.md | 18 +- docs/react-router-v7/api/other-api/adapter.md | 50 +- docs/react-router-v7/api/other-api/dev.md | 108 ++-- docs/react-router-v7/api/other-api/serve.md | 37 +- .../api/rsc/RSCHydratedRouter.md | 16 +- .../api/rsc/RSCStaticRouter.md | 22 +- .../api/rsc/createCallServer.md | 26 +- docs/react-router-v7/api/rsc/getRSCStream.md | 8 +- docs/react-router-v7/api/rsc/index.md | 2 +- .../api/rsc/matchRSCServerRequest.md | 44 +- .../api/rsc/routeRSCServerRequest.md | 38 +- .../api/utils/RouterContextProvider.md | 2 +- .../api/utils/createContext.md | 12 +- .../api/utils/createRoutesFromElements.md | 18 +- docs/react-router-v7/api/utils/data.md | 12 +- .../react-router-v7/api/utils/generatePath.md | 18 +- .../api/utils/isRouteErrorResponse.md | 26 +- docs/react-router-v7/api/utils/matchPath.md | 18 +- docs/react-router-v7/api/utils/matchRoutes.md | 18 +- docs/react-router-v7/api/utils/redirect.md | 10 +- .../api/utils/redirectDocument.md | 16 +- .../api/utils/renderMatches.md | 16 +- docs/react-router-v7/api/utils/replace.md | 18 +- docs/react-router-v7/api/utils/resolvePath.md | 16 +- .../community/api-development-strategy.md | 4 +- .../react-router-v7/community/contributing.md | 14 +- .../explanation/backend-for-frontend.md | 18 +- .../explanation/concurrency.md | 57 +- .../explanation/form-vs-fetcher.md | 81 ++- .../explanation/hot-module-replacement.md | 7 +- .../explanation/index-query-param.md | 28 +- .../explanation/lazy-route-discovery.md | 56 +- .../explanation/progressive-enhancement.md | 10 +- .../explanation/race-conditions.md | 2 +- .../explanation/react-transitions.md | 163 +++++ .../explanation/sessions-and-cookies.md | 2 +- .../explanation/special-files.md | 10 +- .../explanation/state-management.md | 71 +-- .../explanation/type-safety.md | 5 + docs/react-router-v7/how-to/accessibility.md | 20 +- docs/react-router-v7/how-to/data-strategy.md | 310 ++++++++++ docs/react-router-v7/how-to/error-boundary.md | 123 +++- .../react-router-v7/how-to/error-reporting.md | 107 +++- docs/react-router-v7/how-to/fetchers.md | 2 + .../how-to/file-route-conventions.md | 17 +- docs/react-router-v7/how-to/file-uploads.md | 14 +- .../react-router-v7/how-to/form-validation.md | 4 +- docs/react-router-v7/how-to/headers.md | 2 +- .../react-router-v7/how-to/instrumentation.md | 565 ++++++++++++++++++ docs/react-router-v7/how-to/middleware.md | 182 +++--- .../how-to/navigation-blocking.md | 68 +-- docs/react-router-v7/how-to/pre-rendering.md | 111 +++- docs/react-router-v7/how-to/presets.md | 26 +- .../how-to/react-server-components.md | 560 +++++++---------- .../react-router-v7/how-to/resource-routes.md | 61 +- .../how-to/route-module-type-safety.md | 2 +- docs/react-router-v7/how-to/security.md | 5 + docs/react-router-v7/how-to/server-bundles.md | 26 +- docs/react-router-v7/how-to/spa.md | 42 +- docs/react-router-v7/how-to/suspense.md | 24 +- docs/react-router-v7/how-to/using-handle.md | 117 ++++ .../how-to/view-transitions.md | 30 +- .../start/data/data-loading.md | 2 +- .../start/data/route-object.md | 22 +- docs/react-router-v7/start/data/routing.md | 2 +- docs/react-router-v7/start/data/testing.md | 2 +- .../start/declarative/navigating.md | 2 +- .../start/declarative/routing.md | 16 +- .../start/framework/actions.md | 18 +- .../start/framework/data-loading.md | 6 +- .../start/framework/deploying.md | 49 +- .../start/framework/installation.md | 3 +- .../start/framework/pending-ui.md | 12 +- .../start/framework/rendering.md | 2 - .../start/framework/route-module.md | 71 +-- .../start/framework/routing.md | 12 +- .../start/framework/testing.md | 22 +- docs/react-router-v7/start/modes.md | 8 +- .../react-router-v7/tutorials/address-book.md | 324 +++++----- docs/react-router-v7/tutorials/quickstart.md | 82 +-- .../upgrading/component-routes.md | 16 +- docs/react-router-v7/upgrading/future.md | 69 ++- docs/react-router-v7/upgrading/remix.md | 128 ++-- .../upgrading/router-provider.md | 3 +- 147 files changed, 3770 insertions(+), 2762 deletions(-) create mode 100644 docs/react-router-v7/explanation/react-transitions.md create mode 100644 docs/react-router-v7/how-to/data-strategy.md create mode 100644 docs/react-router-v7/how-to/instrumentation.md create mode 100644 docs/react-router-v7/how-to/using-handle.md diff --git a/docs/react-router-v7/api/components/Await.md b/docs/react-router-v7/api/components/Await.md index 0b8e36e..ab41583 100644 --- a/docs/react-router-v7/api/components/Await.md +++ b/docs/react-router-v7/api/components/Await.md @@ -4,18 +4,6 @@ title: Await # Await - - [MODES: framework, data] ## 概要 @@ -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 }; } @@ -49,7 +35,7 @@ function Book() { レビューをロードできませんでした 😬 +
Could not load reviews 😬
} children={(resolvedReviews) => ( @@ -83,12 +69,12 @@ function Await({ ``` -React 要素を使用する場合、[useAsyncValue](../hooks/useAsyncValue) が解決された値を提供します。 +React 要素を使用する場合、[`useAsyncValue`](../hooks/useAsyncValue) が解決された値を提供します。 ```tsx [2] -; + function Reviews() { const resolvedReviews = useAsyncValue(); @@ -98,18 +84,18 @@ 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 おっと} + errorElement={
Oops
} resolve={reviewsPromise} > ``` -よりコンテキストに沿ったエラーを提供するには、子コンポーネントで [useAsyncError](../hooks/useAsyncError) を使用できます。 +よりコンテキストに沿ったエラーを提供するには、子コンポーネントで [`useAsyncError`](../hooks/useAsyncError) を使用できます。 ```tsx -; + function ReviewsError() { const error = useAsyncError(); - return
レビューのロード中にエラーが発生しました: {error.message}
; + return
Error loading reviews: {error.message}
; } ``` -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 ( @@ -155,7 +141,7 @@ export default function Book() {

{book.description}

}> diff --git a/docs/react-router-v7/api/components/Form.md b/docs/react-router-v7/api/components/Form.md index bc68438..507a677 100644 --- a/docs/react-router-v7/api/components/Form.md +++ b/docs/react-router-v7/api/components/Form.md @@ -4,27 +4,17 @@ title: Form # Form - - [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 [`
`](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 [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) です。[`useNavigation`](../hooks/useNavigation) で保留状態をアクティブにし、基本的な HTML [``](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) スタックを操作する必要がないフォームの場合は、[``](https://api.reactrouter.com/v7/types/react_router.FetcherWithComponents.html#Form) を使用してください。 +`Form` は、URL を変更したり、ブラウザの履歴スタックにエントリを追加したりする必要がある送信に最も役立ちます。ブラウザの[`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) スタックを操作する必要がないフォームの場合は、[``](https://api.reactrouter.com/v7/types/react_router.FetcherWithComponents.html#Form) を使用してください。 ```tsx import { Form } from "react-router"; @@ -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 - // default ("render") - - + // default ("render") + + ``` -- **render** — デフォルト。リンクがレンダリングされたときにルートを検出します。 -- **none** — 積極的に検出せず、リンクがクリックされた場合にのみ検出します。 - ### encType -[modes: framework, data] - フォームの送信に使用するエンコードタイプ。 ```tsx - // デフォルト + // Default ``` ### 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"` をサポートします。 ネイティブの [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) は `"get"` と `"post"` のみをサポートします。プログレッシブエンハンスメントをサポートする場合は、他の動詞を避けてください。 ### navigate -[modes: framework, data] - `false` の場合、ナビゲーションをスキップし、内部的に fetcher を介して送信します。これは基本的に [`useFetcher`](../hooks/useFetcher) + `` の省略形であり、このコンポーネントで結果のデータを気にしません。 ### onSubmit -[modes: framework, data] - フォームが送信されたときに呼び出す関数。[`event.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) を呼び出すと、このフォームは何もしません。 ### preventScrollReset -[modes: framework, data] - コンポーネントを使用している場合、ナビゲーションの完了時にスクロール位置がビューポートの先頭にリセットされるのを防ぎます。 ### 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) を参照してください。 \ No newline at end of file +デフォルトでは（指定しない場合）、loader はルーターの標準的な再検証動作に従って再検証されます。 \ No newline at end of file diff --git a/docs/react-router-v7/api/components/Link.md b/docs/react-router-v7/api/components/Link.md index 8719f35..a0cb5c9 100644 --- a/docs/react-router-v7/api/components/Link.md +++ b/docs/react-router-v7/api/components/Link.md @@ -32,7 +32,10 @@ import { Link } from "react-router"; [modes: framework] -リンクの検出動作を定義します。 +リンクの[遅延ルートディスカバリ](../../explanation/lazy-route-discovery)動作を定義します。 + +- **render** - デフォルト。リンクのレンダリング時にルートを検出します。 +- **none** - 積極的に検出せず、リンクがクリックされた場合にのみ検出します。 ```tsx // default ("render") @@ -40,9 +43,6 @@ import { Link } from "react-router"; ``` -- **render** - デフォルト。リンクのレンダリング時にルートを検出します。 -- **none** - 積極的に検出せず、リンクがクリックされた場合にのみ検出します。 - ### prefetch [modes: framework] @@ -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 @@ -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 @@ -168,7 +168,7 @@ function SomeComp() { search: "?query=string", hash: "#hash", }} -/> +/>; ``` ### viewTransition @@ -183,4 +183,18 @@ function SomeComp() { ``` -トランジションに特定のスタイルを適用するには、[`useViewTransitionState`](../hooks/useViewTransitionState) を参照してください。 \ No newline at end of file +トランジションに特定のスタイルを適用するには、[`useViewTransitionState`](../hooks/useViewTransitionState) を参照してください。 + +### unstable_defaultShouldRevalidate + +[modes: framework, data, declarative] + +ナビゲーションのデフォルトの再検証動作を指定します。 + +```tsx + +``` + +アクティブルートに `shouldRevalidate` 関数がない場合、この値が直接使用されます。それ以外の場合は、`shouldRevalidate` に渡され、ルートが再検証の最終的な決定を下すことができます。これは、検索パラメーターを更新する際に、再検証をトリガーしたくない場合に役立ちます。 + +デフォルトでは（指定しない場合）、loader はルーターの標準的な再検証動作に従って再検証されます。 \ No newline at end of file diff --git a/docs/react-router-v7/api/components/Links.md b/docs/react-router-v7/api/components/Links.md index 6a278e1..de2d7be 100644 --- a/docs/react-router-v7/api/components/Links.md +++ b/docs/react-router-v7/api/components/Links.md @@ -2,27 +2,15 @@ title: Links --- -# Links +# リンク - - -[MODES: framework] +[MODES: フレームワーク] ## 概要 [リファレンスドキュメント ↗](https://api.reactrouter.com/v7/functions/react_router.Links.html) -ルートモジュールの [`links`](../../start/framework/route-module#links) エクスポートによって作成されたすべての [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) タグをレンダリングします。ドキュメントの [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) 内にレンダリングする必要があります。 +ルートモジュールの [`links`](../../start/framework/route-module#links) export によって作成されたすべての [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) タグをレンダリングします。ドキュメントの [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) 内にレンダリングする必要があります。 ```tsx import { Links } from "react-router"; @@ -49,4 +37,4 @@ function Links({ nonce }: LinksProps): React.JSX.Element ### nonce -[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) 要素にレンダリングする [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce) 属性。 \ No newline at end of file +[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) 要素にレンダリングする [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce) 属性です。 \ No newline at end of file diff --git a/docs/react-router-v7/api/components/Meta.md b/docs/react-router-v7/api/components/Meta.md index 8b48d7b..bbd4e29 100644 --- a/docs/react-router-v7/api/components/Meta.md +++ b/docs/react-router-v7/api/components/Meta.md @@ -4,25 +4,13 @@ title: Meta # Meta - - [MODES: framework] ## 概要 [リファレンスドキュメント ↗](https://api.reactrouter.com/v7/functions/react_router.Meta.html) -ルートモジュールの [`meta`](../../start/framework/route-module#meta) エクスポートによって作成されたすべての [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) タグをレンダリングします。ドキュメントの [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) 内にレンダリングする必要があります。 +ルートモジュールの [`meta`](../../start/framework/route-module#meta) エクスポートによって作成されたすべての [\`\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) タグをレンダリングします。ドキュメントの [\`\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) 内にレンダリングする必要があります。 ```tsx import { Meta } from "react-router"; diff --git a/docs/react-router-v7/api/components/NavLink.md b/docs/react-router-v7/api/components/NavLink.md index abb1d6d..3b96580 100644 --- a/docs/react-router-v7/api/components/NavLink.md +++ b/docs/react-router-v7/api/components/NavLink.md @@ -4,30 +4,18 @@ title: NavLink # NavLink - - [MODES: framework, data, declarative] ## Summary [リファレンスドキュメント ↗](https://api.reactrouter.com/v7/functions/react_router.NavLink.html) -[Link](../components/Link) をラップし、アクティブおよび保留状態のスタイル設定のための追加の props を提供します。 +[``](../components/Link) をラップし、アクティブおよび保留状態のスタイル設定のための追加の props を提供します。 -- アクティブおよび保留状態に基づいて、クラスがリンクに自動的に適用されます。[NavLinkProps.className](https://api.reactrouter.com/v7/interfaces/react_router.NavLinkProps.html#className) を参照してください。 - - なお、`pending` は Framework および Data モードでのみ利用可能です。 +- アクティブおよび保留状態に基づいて、クラスがリンクに自動的に適用されます。[`NavLinkProps.className`](https://api.reactrouter.com/v7/interfaces/react_router.NavLinkProps.html#className) を参照してください。 + - `pending` は Framework および Data モードでのみ利用可能です。 - リンクがアクティブな場合、`aria-current="page"` がリンクに自動的に適用されます。MDN の [`aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) を参照してください。 -- 状態は、className、style、および children のレンダー props を通じて利用できます。[NavLinkRenderProps](https://api.reactrouter.com/v7/types/react_router.NavLinkRenderProps.html) を参照してください。 +- 状態は、className、style、および children のレンダー props を通じて利用できます。[`NavLinkRenderProps`](https://api.reactrouter.com/v7/types/react_router.NavLinkRenderProps.html) を参照してください。 ```tsx Messages @@ -62,13 +50,13 @@ https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/do 通常の React children または、リンクのアクティブおよび保留状態を持つオブジェクトを受け取る関数にすることができます。 - ```tsx - - {({ isActive }) => ( - Tasks - )} - - ``` +```tsx + + {({ isActive }) => ( + Tasks + )} + +``` ### className @@ -88,7 +76,7 @@ a.transitioning { } ``` -または、[`NavLinkRenderProps`](https://api.reactrouter.com/v7/types/react_router.NavLinkRenderProps.html) を受け取り、`className` を返す関数を指定することもできます。 +または、[`NavLinkRenderProps`](https://api.reactrouter.com/v7/types/react_router.NavLinkRenderProps.html) を受け取り `className` を返す関数を指定することもできます。 ```tsx ( @@ -102,7 +90,10 @@ a.transitioning { [modes: framework] -リンクの検出動作を定義します。 +リンクの [lazy route discovery](../../explanation/lazy-route-discovery) 動作を定義します。 + +- **render** - デフォルト、リンクがレンダリングされるときにルートを検出します。 +- **none** - 積極的に検出せず、リンクがクリックされた場合にのみ検出します。 ```tsx // default ("render") @@ -110,9 +101,6 @@ a.transitioning { ``` -- **render** - デフォルト、リンクがレンダリングされるときにルートを検出します。 -- **none** - 積極的に検出せず、リンクがクリックされた場合にのみ検出します。 - ### end [modes: framework, data, declarative] @@ -161,7 +149,7 @@ a.transitioning { [modes: framework, data] -リンクがクリックされたときに、スクロール位置がウィンドウの上部にリセットされるのを防ぎます。アプリが [`ScrollRestoration`](../components/ScrollRestoration) を使用している場合に限ります。これは、新しい場所でスクロールが上部にリセットされるのを防ぐだけであり、戻る/進むボタンのナビゲーションではスクロール位置が復元されます。 +リンクがクリックされ、アプリが [`ScrollRestoration`](../components/ScrollRestoration) を使用している場合に、スクロール位置がウィンドウの上部にリセットされるのを防ぎます。これは、新しい場所でスクロールが上部にリセットされるのを防ぐだけであり、戻る/進むボタンのナビゲーションではスクロール位置が復元されます。 ```tsx @@ -181,10 +169,10 @@ a.transitioning { 親ルートパターンが "blog" で、子ルートパターンが "blog/:slug/edit" であるルート階層を考えてみましょう。 -- **route** - デフォルト、ルートパターンを基準にしてリンクを解決します。上記の例では、`"..."` の相対リンクは、`:slug/edit` セグメントを "/blog" まで削除します。 -- **path** - パスを基準にするため、`"..."` は "/blog/:slug" まで 1 つの URL セグメントのみを削除します。 +- **route** - デフォルト、ルートパターンを基準にしてリンクを解決します。上記の例では、`"..."` の相対リンクは、`:slug/edit` セグメントを削除して `"/blog"` まで戻ります。 +- **path** - パスを基準にするため、`"..."` は `/blog/:slug` まで 1 つの URL セグメントのみを削除します。 -なお、インデックスルートとレイアウトルートにはパスがないため、相対パスの計算には含まれません。 +インデックスルートおよびレイアウトルートはパスを持たないため、相対パスの計算には含まれません。 ### reloadDocument @@ -200,7 +188,7 @@ a.transitioning { [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 @@ -242,7 +230,7 @@ function SomeComp() { [modes: framework, data, declarative] -スタイルは、[`NavLinkRenderProps`](https://api.reactrouter.com/v7/types/react_router.NavLinkRenderProps.html) を受け取り、スタイルを返す関数を介して動的に適用することもできます。 +スタイルは、[`NavLinkRenderProps`](https://api.reactrouter.com/v7/types/react_router.NavLinkRenderProps.html) を受け取りスタイルを返す関数を介して動的に適用することもできます。 ```tsx diff --git a/docs/react-router-v7/api/components/Navigate.md b/docs/react-router-v7/api/components/Navigate.md index 2f7da63..04ae8fc 100644 --- a/docs/react-router-v7/api/components/Navigate.md +++ b/docs/react-router-v7/api/components/Navigate.md @@ -4,15 +4,27 @@ title: Navigate # Navigate + + [MODES: framework, data, declarative] ## 概要 [リファレンスドキュメント ↗](https://api.reactrouter.com/v7/functions/react_router.Navigate.html) -フックが使用できない [`React.Component` class](https://react.dev/reference/react/Component) で使用する、[`useNavigate`](../hooks/useNavigate) のコンポーネントベースのバージョンです。 +[`React.Component` クラス](https://react.dev/reference/react/Component) でフックが使用できない場合に使用する、[useNavigate](../hooks/useNavigate) のコンポーネントベースのバージョンです。 -[`useNavigate`](../hooks/useNavigate) の代わりにこのコンポーネントを使用することは推奨されません。 +[useNavigate](../hooks/useNavigate) の代わりにこのコンポーネントを使用することは推奨されません。 ```tsx @@ -28,17 +40,24 @@ function Navigate({ to, replace, state, relative }: NavigateProps): null ### relative -`to` propにおける相対ルーティングの解釈方法。 -[`RelativeRoutingType`](https://api.reactrouter.com/v7/types/react_router.RelativeRoutingType.html) を参照してください。 +[modes: framework, data, declarative] + +`to` prop における相対ルーティングをどのように解釈するか。[`RelativeRoutingType`](https://api.reactrouter.com/v7/types/react_router.RelativeRoutingType.html) を参照してください。 ### replace +[modes: framework, data, declarative] + [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) スタック内の現在のエントリを置き換えるかどうか。 ### state -新しい [`Location`](https://api.reactrouter.com/v7/interfaces/react_router.Location.html) に渡して [`history.state`](https://developer.mozilla.org/en-US/docs/Web/API/History/state) に保存する state。 +[modes: framework, data, declarative] + +新しい [`Location`](https://api.reactrouter.com/v7/interfaces/react_router.Location.html) に渡す state で、[`history.state`](https://developer.mozilla.org/en-US/docs/Web/API/History/state) に格納されます。 ### to -ナビゲート先のパス。これは文字列または [`Path`](https://api.reactrouter.com/v7/interfaces/react_router.Path.html) オブジェクトです。 \ No newline at end of file +[modes: framework, data, declarative] + +ナビゲート先のパス。これは文字列または [`Path`](https://api.reactrouter.com/v7/interfaces/react_router.Path.html) オブジェクトのいずれかです。 \ No newline at end of file diff --git a/docs/react-router-v7/api/components/PrefetchPageLinks.md b/docs/react-router-v7/api/components/PrefetchPageLinks.md index 33b9bbc..78f4a70 100644 --- a/docs/react-router-v7/api/components/PrefetchPageLinks.md +++ b/docs/react-router-v7/api/components/PrefetchPageLinks.md @@ -4,23 +4,11 @@ title: PrefetchPageLinks # PrefetchPageLinks - - [MODES: framework] -## Summary +## 概要 -[Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.PrefetchPageLinks.html) +[リファレンスドキュメント ↗](https://api.reactrouter.com/v7/functions/react_router.PrefetchPageLinks.html) 別のページのモジュールとデータに対して [``](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/rel) タグをレンダリングし、そのページへの即時ナビゲーションを可能にします。 [``](./Link#prefetch) は内部でこれを使用しますが、他の理由でページをプリフェッチするためにレンダリングすることもできます。 @@ -32,7 +20,7 @@ import { PrefetchPageLinks } from "react-router"; ``` -## Signature +## シグネチャ ```tsx function PrefetchPageLinks({ page, ...linkProps }: PageLinkDescriptor) @@ -42,8 +30,8 @@ function PrefetchPageLinks({ page, ...linkProps }: PageLinkDescriptor) ### page -プリフェッチするページの絶対パス。例: `/absolute/path`。 +プリフェッチするページの絶対パスです（例: `/absolute/path`）。 ### linkProps -[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) タグにスプレッドされる追加の props。例: [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/crossOrigin)、[`integrity`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/integrity)、[`rel`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/rel) など。 \ No newline at end of file +[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) タグにスプレッドされる追加の props (例: [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/crossOrigin)、[`integrity`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/integrity)、[`rel`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/rel) など)。 \ No newline at end of file diff --git a/docs/react-router-v7/api/components/Route.md b/docs/react-router-v7/api/components/Route.md index abc9e9c..f9ae160 100644 --- a/docs/react-router-v7/api/components/Route.md +++ b/docs/react-router-v7/api/components/Route.md @@ -11,11 +11,11 @@ title: Route [リファレンスドキュメント ↗](https://api.reactrouter.com/v7/functions/react_router.Route.html) パターンが現在のロケーションに一致したときにレンダリングする要素を設定します。 -[`Routes`](../components/Routes) 要素内でレンダリングする必要があります。これらのルートは、 +[Routes](../components/Routes) 要素内でレンダリングする必要があります。これらのルートは、 データローディング、アクション、コード分割、またはその他のルートモジュールの機能には関与しません。 ```tsx -// Usually used in a declarative router +// 通常、宣言的な router で使用されます。 function App() { return ( @@ -28,7 +28,7 @@ function App() { ); } -// But can be used with a data router as well if you prefer the JSX notation +// しかし、JSX 表記を好む場合はデータ router でも使用できます。 const routes = createRoutesFromElements( <> @@ -54,7 +54,7 @@ function Route(props: RouteProps): React.ReactElement | null ### action -ルートのアクション。 +ルート action。 [`action`](../../start/data/route-object#action) を参照してください。 ### caseSensitive @@ -63,45 +63,45 @@ function Route(props: RouteProps): React.ReactElement | null ### Component -このルートがマッチしたときにレンダリングする React Component。 -`element` とは相互排他的です。 +この route がマッチしたときにレンダリングする React Component。 +`element` とは相互に排他的です。 ### children -子となる Route コンポーネント。 +子 Route コンポーネント。 ### element -この Route がマッチしたときにレンダリングする React 要素。 -`Component` とは相互排他的です。 +この Route がマッチしたときにレンダリングする React element。 +`Component` とは相互に排他的です。 ### ErrorBoundary -エラーが発生した場合にこのルートでレンダリングする React Component。 -`errorElement` とは相互排他的です。 +エラーが発生した場合にこの route でレンダリングする React Component。 +`errorElement` とは相互に排他的です。 ### errorElement -エラーが発生した場合にこのルートでレンダリングする React 要素。 -`ErrorBoundary` とは相互排他的です。 +エラーが発生した場合にこの route でレンダリングする React element。 +`ErrorBoundary` とは相互に排他的です。 ### handle -ルートのハンドル。 +ルート handle。 ### HydrateFallback -このルーターがデータをロードしている間にレンダリングする React Component。 -`hydrateFallbackElement` とは相互排他的です。 +この router がデータをロードしている間にレンダリングする React Component。 +`hydrateFallbackElement` とは相互に排他的です。 ### hydrateFallbackElement -このルーターがデータをロードしている間にレンダリングする React 要素。 -`HydrateFallback` とは相互排他的です。 +この router がデータをロードしている間にレンダリングする React element。 +`HydrateFallback` とは相互に排他的です。 ### id -このルートの一意の識別子 ([`DataRouter`](https://api.reactrouter.com/v7/interfaces/react_router.DataRouter.html) で使用)。 +この route の一意な識別子（[`DataRouter`](https://api.reactrouter.com/v7/interfaces/react_router.DataRouter.html) と共に使用するため）。 ### index @@ -109,13 +109,13 @@ function Route(props: RouteProps): React.ReactElement | null ### lazy -ルートオブジェクトに解決される Promise を返す関数。 -ルートのコード分割に使用されます。 +route オブジェクトに解決される Promise を返す関数。 +route のコード分割に使用されます。 [`lazy`](../../start/data/route-object#lazy) を参照してください。 ### loader -ルートのローダー。 +ルート loader。 [`loader`](../../start/data/route-object#loader) を参照してください。 ### path @@ -124,5 +124,5 @@ function Route(props: RouteProps): React.ReactElement | null ### shouldRevalidate -ルートの shouldRevalidate 関数。 +ルート shouldRevalidate 関数。 [`shouldRevalidate`](../../start/data/route-object#shouldRevalidate) を参照してください。 \ No newline at end of file diff --git a/docs/react-router-v7/api/components/Routes.md b/docs/react-router-v7/api/components/Routes.md index 7182e12..d8e12fc 100644 --- a/docs/react-router-v7/api/components/Routes.md +++ b/docs/react-router-v7/api/components/Routes.md @@ -4,23 +4,11 @@ title: Routes # Routes - - [MODES: framework, data, declarative] ## 概要 -[リファレンスドキュメント ↗](https://api.reactrouter.com/v7/functions/react_router.Routes.html) +[Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.Routes.html) 現在のロケーションに最も一致する [``s](../components/Route) のブランチをレンダリングします。これらのルートは、[データローディング](../../start/framework/route-module#loader)、[`action`](../../start/framework/route-module#action)、コード分割、またはその他の[ルートモジュール](../../start/framework/route-module)の機能には関与しないことに注意してください。 @@ -30,7 +18,7 @@ import { Route, Routes } from "react-router"; } /> } /> - }> + } /> ``` diff --git a/docs/react-router-v7/api/components/Scripts.md b/docs/react-router-v7/api/components/Scripts.md index fda205e..0fe5ea1 100644 --- a/docs/react-router-v7/api/components/Scripts.md +++ b/docs/react-router-v7/api/components/Scripts.md @@ -22,7 +22,7 @@ https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/do [Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.Scripts.html) -アプリのクライアントランタイムをレンダリングします。ドキュメントの [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) 内にレンダリングする必要があります。 +アプリのクライアントランタイムをレンダリングします。ドキュメントの[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body)内にレンダリングする必要があります。 サーバーレンダリングの場合、`` を省略すると、アプリは JavaScript なしの従来の Web アプリとして動作し、HTML とブラウザの動作のみに依存します。 @@ -51,4 +51,4 @@ function Scripts(scriptProps: ScriptsProps): React.JSX.Element | null ### scriptProps -[`