react-router)@react-router/*)このページには、v6.0.0以降のReact Routerのすべてのリリース/リリースノートが記載されています。v6より前のリリースについては、Githubリリースページを参照してください。
Githubのページではなく、このファイルでリリースノートを管理している理由は2つあります。
日付: 2024-12-02
パッケージがReact Routerにピア依存関係を持つことができるように、エクスポートマップでは一時的に1つのビルドのみを使用する (#12437)
moduleResolution Node16とNodeNextをサポート (#12440)
子ルートの幅広いmatchesとparams型を生成する (#12397)
実行時に、matchesには子ルートのマッチが含まれ、paramsには子ルートのパスパラメータが含まれます。しかし、以前は、親ルートと現在のルートのmatchesとparamsの情報に対してのみ型を生成していました。生成された型を実行時の動作により近づけるために、子ルートの情報にアクセスする場合、より寛容で幅広い型を生成するようになりました。
react-router@react-router/architect@react-router/cloudflare@react-router/dev@react-router/express@react-router/fs-routes@react-router/node@react-router/remix-config-routes-adapter@react-router/serve完全な変更ログ: v7.0.1...v7.0.2
日付: 2024-11-22
react-router@react-router/architect@react-router/cloudflare@react-router/dev@react-router/express@react-router/fs-routes@react-router/node@react-router/remix-config-routes-adapter@react-router/serve完全な変更ログ: v7.0.0...v7.0.1
日付: 2024-11-21
react-router-dom、@remix-run/react、@remix-run/server-runtime、および@remix-run/routerは、react-routerパッケージに統合されました。react-router-domはv7でもreact-routerからのすべてのものの再エクスポートとして公開されています。@remix-run/cloudflare-pagesと@remix-run/cloudflare-workersは@react-router/cloudflareパッケージに統合されました。react-router-dom-v5-compatとreact-router-nativeパッケージは、v7から削除されました。Remix v2では、様々なランタイムパッケージ（node、cloudflare、deno）を通じて一般的な@remix-run/server-runtime APIをすべて再エクスポートしていました。これにより、package.jsonに@remix-run/server-runtimeの依存関係を追加する必要はありませんでした。パッケージがreact-routerに統合されたことで、これらの共通APIはランタイムアダプターを通じて再エクスポートされなくなりました。すべての共通APIはreact-routerからインポートし、ランタイム固有のAPIのみをランタイムパッケージからインポートする必要があります。
// Runtime-specific APIs
import { createFileSessionStorage } from "@react-router/node";
// Runtime-agnostic APIs
import { redirect, useLoaderData } from "react-router";
React Router v7では、次のAPIが削除されました。
jsondeferunstable_composeUploadHandlersunstable_createMemoryUploadHandlerunstable_parseMultipartFormDataReact Router v7では、次の最小バージョンが必要です。
node@20
fetch APIをポリフィルするためのpolyfill `installGlobals`メソッドを提供しなくなりました。react@18、react-dom@18RemixとReact Routerは、「Future Flags」を利用したAPI開発戦略に従っています。これにより、メジャーリリースで多数の破壊的変更を導入することを回避できます。代わりに、破壊的変更はマイナーリリースでフラグの背後に導入され、ユーザーは都合の良い時にオプトインできます。次のメジャーリリースでは、すべてのFuture Flagの動作がデフォルトの動作になります。
次の、以前はフラグが付けられていた動作は、React Router v7ではデフォルトになりました。
future.v7_relativeSplatPathfuture.v7_startTransitionfuture.v7_fetcherPersistfuture.v7_normalizeFormMethodfuture.v7_partialHydrationfuture.v7_skipActionStatusRevalidationfuture.v3_fetcherPersistfuture.v3_relativeSplatPathfuture.v3_throwAbortReasonfuture.v3_singleFetchfuture.v3_lazyRouteDiscoveryfuture.v3_optimizeDepsRemix Viteプラグインは、React Router v7を使用してフルスタックSSRアプリを構築する適切な方法です。以前のesbuildベースのコンパイラは使用できなくなりました。
vitePluginとcloudflareDevProxyVitePluginの名前変更
RemixユーザーがReact Routerに移行する場合、vitePluginとcloudflareDevProxyVitePluginのエクスポートは名前が変更され、移動されました (#11904)
-import {
- vitePlugin as remix,
- cloudflareDevProxyVitePlugin,
-} from "@remix/dev";
+import { reactRouter } from "@react-router/dev/vite";
+import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare";
manifestオプションの削除
RemixユーザーがReact Routerに移行する場合、Viteプラグインのmanifestオプションは削除されました。manifestオプションは、より強力なbuildEndフックによって置き換えられました。これはbuildManifest引数が渡されるためです。必要に応じてビルドマニフェストをディスクに書き込むことができますが、buildEndフック内でビルドマニフェストに依存するロジックを記述する方が便利なことがほとんどです。(#11573)
manifestオプションを使用していた場合、次のようにマニフェストをディスクに書き込むbuildEndフックに置き換えることができます。
// react-router.config.ts
import { type Config } from "@react-router/dev/config";
import { writeFile } from "node:fs/promises";
export default {
async buildEnd({ buildManifest }) {
await writeFile(
"build/manifest.json",
JSON.stringify(buildManifest, null, 2),
"utf-8"
);
},
} satisfies Config;
React 19では、レンダリングパスでPromiseを処理するためのファーストクラスサポート（React.useとuseAction経由）が提供されるため、以前はundefinedを返していたAPIのPromiseを公開できるようになりました。
useNavigate()useSubmit()useFetcher().loaduseFetcher().submituseRevalidator().revalidate()routes.tsReact Router Viteプラグインを使用する場合、ルートはapp/routes.tsで定義されます。ルート設定はroutesエクスポートを介してエクスポートされ、RouteConfig型に準拠します。ルートヘルパー関数route、index、およびlayoutは、宣言的な型安全なルート定義を容易にするために提供されます。
// app/routes.ts
import {
type RouteConfig,
route,
index,
layout,
} from "@react-router/dev/routes";
export const routes: RouteConfig = [
index("./home.tsx"),
route("about", "./about.tsx"),
layout("./auth/layout.tsx", [
route("login", "./auth/login.tsx"),
route("register", "./auth/register.tsx"),
]),
route("concerts", [
index("./concerts/home.tsx"),
route(":city", "./concerts/city.tsx"),
route("trending", "./concerts/trending.tsx"),
]),
];
RemixユーザーがReact Routerに移行する場合、@react-router/fs-routesパッケージを使用して、routes.ts内でファイルシステムルーティングを設定できます。デフォルトのRemix設定を再現する最小限のルート設定は次のようになります。
// app/routes.ts
import { type RouteConfig } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";
export const routes: RouteConfig = flatRoutes();
ファイルシステムルーティングから設定ベースのルートに移行する場合、非同期flatRoutes関数の結果を、設定ベースのルートの配列に展開することで、アプローチを組み合わせて使用できます。
// app/routes.ts
import { type RouteConfig, route } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";
export const routes: RouteConfig = [
// Example config-based route:
route("/hello", "./routes/hello.tsx"),
// File system routes scoped to a different directory:
...(await flatRoutes({
rootDirectory: "fs-routes",
})),
];
代替のファイルシステムルーティング規則を使用するためにRemixのroutesオプションを使用していた場合、@react-router/remix-config-routes-adapterを使用して、これらを新しいRouteConfig形式に適応させることができます。
たとえば、Remix v2でRemix v1ルート規則を使用していた場合、@react-router/remix-config-routes-adapterと@remix-run/v1-route-conventionを組み合わせて、これをReact Routerに適応させることができます。
// app/routes.ts
import { type RouteConfig } from "@react-router/dev/routes";
import { remixConfigRoutes } from "@react-router/remix-config-routes-adapter";
import { createRoutesFromFolders } from "@remix-run/v1-route-convention";
export const routes: RouteConfig = remixConfigRoutes(async (defineRoutes) => {
return createRoutesFromFolders(defineRoutes, {
ignoredFilePatterns: ["**/.*", "**/*.css"],
});
});
また、設定ベースのルートを定義するためにRemixのroutesオプションを使用していた場合、最小限のコード変更で@react-router/remix-config-routes-adapterを使用して、これらを新しいRouteConfig形式に適応させることもできます。これは迅速な移行経路となりますが、新しいRouteConfig形式への移行は非常に簡単であるため、Remixの設定ベースのルートを新しいRouteConfig形式に移行することをお勧めします。
// app/routes.ts
-import { type RouteConfig } from "@react-router/dev/routes";
+import { type RouteConfig, route } from "@react-router/dev/routes";
-import { remixConfigRoutes } from "@react-router/remix-config-routes-adapter";
-export const routes: RouteConfig = remixConfigRoutes(async (defineRoutes) => {
- defineRoutes((route) => {
- route("/parent", "./routes/parent.tsx", () => [
- route("/child", "./routes/child.tsx"),
- ]);
- });
-});
+export const routes: RouteConfig = [
+ route("/parent", "./routes/parent.tsx", [
+ route("/child", "./routes/child.tsx"),
+ ]),
+];
React Routerは、各ルートモジュールの型を生成し、型付きのプロップをルートモジュールコンポーネントエクスポートに渡すようになりました (#11961、#12019)。これらの型には、./+types/からインポートすることでアクセスできます。
ハウツー > ルートモジュール型安全性と解説 > 型安全性で詳細を確認してください。
React Router v7には、SSGユースケースをサポートするためのviteプラグインに新しいprerender設定が含まれています。これにより、ビルド時に.htmlファイルと.dataファイルが事前にレンダリングされ、実行時に実行中のサーバーまたはCDNから静的に提供できます (#11539)
export default defineConfig({
plugins: [
reactRouter({
async prerender({ getStaticPaths }) {
let slugs = await fakeGetSlugsFromCms();
return [
...getStaticPaths(),
...slugs.map((slug) => `/product/${slug}`),
];
},
}),
tsconfigPaths(),
],
});
async function fakeGetSlugsFromCms() {
await new Promise((r) => setTimeout(r, 1000));
return ["shirt", "hat"];
}
react-router)turbo-streamを介して生のPromiseを使用することを優先して、元のdefer実装を削除しました (#11744)deferAbortedDeferredErrortype TypedDeferredDataUNSAFE_DeferredDataUNSAFE_DEFERRED_SYMBOL@remix-run/routerreact-router-dom@remix-run/server-runtime@remix-run/testingAgnosticDataIndexRouteObjectAgnosticDataNonIndexRouteObjectAgnosticDataRouteMatchAgnosticDataRouteObjectAgnosticIndexRouteObjectAgnosticNonIndexRouteObjectAgnosticRouteMatchAgnosticRouteObjectTrackedPromiseunstable_AgnosticPatchRoutesOnMissFunctioncreateRoutergetStaticContextFromErrorHashPathnameSearchimport { HydratedRouter } from 'react-router/dom'import { RouterProvider } from "react-router/dom"@react-router/*)createCookiecreateCookieSessionStoragecreateMemorySessionStoragecreateSessionStoragecreateCookieFactorycreateSessionStorageFactorycreateCookieSessionStorageFactorycreateMemorySessionStorageFactoryRecord<string, Route> → Record<string, Route | undefined>react-router - unstable_dataStrategy の安定化 (#11969)react-router - unstable_patchRoutesOnNavigation の安定化 (#11970)react-router - Remix SSR を使用する場合に、Link/NavLink へのプリフェッチ機能を追加 (#11402)react-router - SSR でレンダリングされたドキュメントの読み込み時に正しく復元できるように ScrollRestoration を強化 (#11401)@react-router/dev - 既存の SSG ユースケースをサポートするために、React Router Vite プラグインに prerender 設定のサポートを追加 (#11539)@react-router/dev - シングルフェッチ非同期ハイドレーションアプローチと互換性のない内部実装 entry.server.spa.tsx を削除 (#11681)@react-router/serve: 新しい prerender API をサポートするように express.static の設定を更新 (#11547)build/client/assets フォルダ内のアセットは、以前と同様に、1 年間の不変の Cache-Control ヘッダー付きで提供されます。.html ファイルや .data ファイルなど）は、特定の Cache-Control ヘッダー付きで提供されません。.data ファイルは、Content-Type: text/x-turbo で提供されます。express.static を介してこれを追加すると、.data ファイルに Cache-Control: public, max-age=0 も追加されるようです。substr を substring に置き換え (#12080)react-router - ローダー/アクションから data() を使用して返されたリダイレクトを修正 (#12021)@react-router/dev - リソースルートのプリレンダリングを有効化 (#12200)@react-router/dev - フラットな出力ファイル構造に対する相対的な設定ディレクトリを解決 (#12187)react-router@react-router/architect@react-router/cloudflare@react-router/dev@react-router/express@react-router/fs-routes@react-router/node@react-router/remix-config-routes-adapter@react-router/serve完全な変更ログ: v6.28.0...v7.0.0
日付: 2024-11-06
json/defer に非推奨警告を追加完全な変更ログ: v6.27.0...v6.28.0
日付: 2024-10-11
このリリースでは、保留中の React Router v7 リリースに向けて、いくつかの「不安定な」API を安定化しています（詳細については、こちらの投稿と投稿を参照してください）。
unstable_dataStrategy → dataStrategy (createBrowserRouter など) (ドキュメント)unstable_patchRoutesOnNavigation → patchRoutesOnNavigation (createBrowserRouter など) (ドキュメント)unstable_flushSync → flushSync (useSubmit、fetcher.load、fetcher.submit) (ドキュメント)unstable_viewTransition → viewTransition (<Link>、<Form>、useNavigate、useSubmit) (ドキュメント)unstable_flushSync オプションを安定化 (#11989)unstable_useViewTransitionState フックの unstable_viewTransition オプションを安定化 (#11989)unstable_dataStrategy を安定化 (#11974)unstable_patchRoutesOnNavigation を安定化 (#11973)PatchRoutesOnNavigationFunctionArgs 型を追加 (#11967)?index パラメータが以前の送信から既に存在する場合に、コンテキストルート（インデックス子を持つ親ルート）に送信する際のバグを修正 (#12003)useFormAction のバグを修正 - ?index パラメータを削除しても、他の Remix 以外の index パラメータは保持されない (#12003)preventScrollReset が永続化されないフェッチャーのバグを修正 (#11999)console.error を回避 (#12050)partialHydration のバグを修正 (#12070)patchRoutesOnNavigation 呼び出しの中断による問題を修正するために、内部キャッシュを削除 (#12055)unstable_ API でこの動作に依存していた場合、破壊的な変更となる可能性があります。patchRoutesOnNavigation への進行中の呼び出しをキャッシュしていました。request.signal が中断され）、最初の呼び出しの patch が no-op になる場合、patch の短絡処理とは矛盾していました。import() のようなものへの繰り返し呼び出しは既に自動的にキャッシュされるため、キャッシュは削除されました。そうでない場合は、ユーザーランドでこのキャッシュを実装するのは簡単です。unstable_patchRoutesOnNavigation から内部の discoveredRoutes FIFO キューを削除 (#11977)unstable_ API でこの動作に依存していた場合、破壊的な変更となる可能性があります。patchRoutesOnNavigation 内に独自のキャッシュを実装できます。patchRoutesOnNavigation の patch メソッド内の RouteObject の型を修正して、patch に渡される不可知論的なルートオブジェクトを期待しないようにします (#11967)patchRoutesOnNavigation からスローされたエラーを、400 ErrorResponse インスタンスにラップする代わりに、useRouteError に直接公開します (#12111)完全な変更ログ: v6.26.2...v6.27.0
日付: 2024-09-09
unstable_dataStrategy API を更新 (#11943)unstable_dataStrategy を採用している場合は、これにはこの API に対する破壊的な変更が含まれているため、注意深く確認してください。unstable_HandlerResult の名前を unstable_DataStrategyResult に変更unstable_dataStrategy の戻り値のシグネチャを unstable_DataStrategyResult[] の並列配列（matches と並列）から routeId => unstable_DataStrategyResult のキー/値オブジェクトに変更match.shouldLoad を介して）。DataStrategyResult を返す代わりに、handlerOverride から結果を返すか、スローする必要があります。handlerOverride からの戻り値（またはスローされたエラー）は DataStrategyResult にラップされ、match.resolve から返されます。match.resolve() の結果を最終的な結果オブジェクトに集約している場合は、DataStrategyResult 型について考える必要はありません。handlerOverride 内から手動で結果オブジェクトに入力する場合は、React Router がそれが成功した実行かエラーかを認識できるように、DataStrategyResult を値として割り当てる必要があります（詳細については、ドキュメントの例を参照）。unstable_dataStrategy に新しい fetcherKey パラメータを追加blocker.proceed が迅速に/同期的に呼び出された場合のブロッカーの使用を修正 (#11930)完全な変更ログ: v6.26.1...v6.26.2
日付: 2024-08-15
unstable_patchRoutesOnMiss の名前を unstable_patchRoutesOnNavigation に変更 (#11888)unstable_patchRoutesOnNavigation ロジックを更新します。これは、まだ検出されていないより高いスコアを持つ静的ルートが存在する場合です (#11883)unstable_patchRoutesOnNavigation を既に呼び出した前のパスの内部 FIFO キューも活用するようになりました。これにより、同じパスへの後続のナビゲーションで再呼び出しが行われません。完全な変更ログ: v6.26.0...v6.26.1
日付: 2024-08-01
history.pushState の代わりに history.replaceState を実行する redirect(url, init?) の新しい代替手段である replace(url, init?) を追加 (#11811)unstable_data() API を追加 (#11836)createStaticHandler.query() と共に使用して、データを Response インスタンスに強制的にシリアル化することなく、ローダー/アクションがカスタム status/headers と共に任意のデータ返すことを可能にすることを目的としています。turbo-stream を介したシリアル化など、unstable_dataStrategy を介してより高度なシリアル化戦術が可能になります。HandlerResult から status フィールドが削除されます。unstable_dataStrategy から特定のstatusを返す必要がある場合は、代わりにunstable_data() を使用してください。future.v7_partialHydrationとunstable_patchRoutesOnMissを併用した場合の初期ハイドレーション動作を修正しました (#11838)HydrateFallbackコンポーネントをレンダリングできるように、router.state.matchesに部分一致が含まれるようになりました。完全な変更ログ: v6.25.1...v6.26.0
日付: 2024年7月17日
RouterProvider内部をメモ化しました (#11803)完全な変更ログ: v6.25.0...v6.25.1
日付: 2024年7月16日
v7_skipActionErrorRevalidationの安定化このリリースでは、今後のReact Router v7リリースに向けて、future.unstable_skipActionErrorRevalidationフラグをfuture.v7_skipActionErrorRevalidationに安定化しました。
4xx/5xx Responseを返す/スローするアクションは、デフォルトでは再検証をトリガーしません。shouldRevalidateのunstable_actionStatusパラメータをactionStatusに安定化しました。future.unstable_skipActionErrorRevalidationをfuture.v7_skipActionErrorRevalidationとして安定化しました (#11769)useMatch内のパスを適切にデコードして、一致/パラメータがデコードされたパラメータを反映するようにしました (#11789)unstable_patchRoutesOnMissからスローされたエラーのバブリングを修正しました (#11786)unstable_patchRoutesOnMissを使用するSSRアプリでのハイドレーションを修正しました (#11790)完全な変更ログ: v6.24.1...v6.25.0
日付: 2024年7月3日
polyfill.ioの参照を削除しました。このドメインは売却され、マルウェアを提供することが判明したためです (#11741)
NavLinkコールバックの型付けを容易にするために、NavLinkRenderProps型をエクスポートしました (#11553)future.v7_relativeSplatPathを使用する場合、パスレスルートの子であるスプラットルートで相対パスを正しく解決します (#11633)router.routesのID/リフローをトリガーします (#11740)完全な変更ログ: v6.24.0...v6.24.1
日付: 2024年6月24日
v6.24.0で新しい「遅延ルート検出」APIをリリースできることを嬉しく思います！背景情報については、元のRFCを参照してください。要約すると、<RouterProvider>を介してv6.4でデータAPIを導入して以来、トレードオフの1つが、<BrowserRouter>/<Routes>アプリにあったものと同様の説得力のあるコード分割ストーリーの欠如であったことに少し不満を感じていました。v6.9.0でroute.lazyを使用してそのストーリーを改善するための小さな一歩を踏み出しましたが、v6.24.0では残りの部分を完了しました。
「フォグ・オブ・ウォー」を使用すると、createBrowserRouter（およびそのメモリ/ハッシュ対応物）に渡される新しいunstable_patchRoutesOnMissオプションを介して、ルートツリーの一部を遅延ロードできるようになりました。これにより、React Routerが特定のパスに一致できない場所にフックし、ナビゲーション（またはフェッチャ呼び出し）中に新しいルートをルートツリーにパッチする手段が得られます。
非常に小さな例を示しますが、詳細とユースケースについてはドキュメントを参照してください。
const router = createBrowserRouter(
[
{
id: "root",
path: "/",
Component: RootComponent,
},
],
{
async unstable_patchRoutesOnMiss({ path, patch }) {
if (path === "/a") {
// Load the `a` route (`{ path: 'a', Component: A }`)
let route = await getARoute();
// Patch the `a` route in as a new child of the `root` route
patch("root", [route]);
}
},
}
);
fetcher.submitの型を修正しました。useSubmitにのみ関連する不正確なnavigate/fetcherKey/unstable_viewTransitionオプションを削除しました (#11631)<StaticRouter>に渡される偽のlocation.state値を許可しました (#11495)完全な変更ログ: v6.23.1...v6.24.0
日付: 2024年5月10日
<Await>を介してundefinedを解決できるようにしました (#11513)document.startViewTransitionの可用性をチェックするときに、防御的なdocumentチェックを追加しました (#11544)react-router-dom/serverのインポートをindex.tsではなくreact-router-domに戻しました (#11514)@remix-run/router - staticHandler.queryRouteでunstable_dataStrategyをサポートしました (#11515)完全な変更ログ: v6.23.0...v6.23.1
日付: 2024年4月23日
新しいunstable_dataStrategyAPIは、loader/action関数のデータ戦略を制御する必要がある高度なユースケース向けに設計された低レベルAPIです。デフォルトの実装は今日の動作であり、すべてのローダーを並列にフェッチすることですが、このオプションにより、Remix "シングルフェッチ"、ユーザーランドミドルウェア/コンテキストAPI、自動ローダーキャッシングなどを含む、より高度なデータフローを実装できます。詳細についてはドキュメントを参照してください。
注記：これは、高度なユースケースを目的とした低レベルAPIです。これは、React Routerのloader/action実行の内部処理をオーバーライドし、正しく行われないとアプリコードが壊れます。注意して使用し、適切なテストを実行してください。
現在、すべてのアクティブなloaderは、actionの結果に関係なく、actionの送信後に再検証されます。ただし、ほとんどの場合、actionからの4xx/5xx応答は、実際にはデータが変更されず、再検証が不要であることを意味します。ここでは、この動作を変更する新しいfuture.unstable_skipActionErrorRevalidationフラグを導入しており、今後のReact Routerのバージョンでこれをデフォルトにする予定です。
このフラグが有効になっている場合、4xx/5xx応答ステータスを返す/スローするactionは、自動的に再検証されなくなります。このフラグが有効な状態で4xx/5xxの結果後に再検証する必要がある場合は、shouldRevalidateからtrueを返すことで引き続き実行できます。これにより、actionデータにエンコードする必要なく、action応答のステータスに基づいて決定を行うことができるため、actionResultとともに新しいunstable_actionStatus引数も受信するようになりました。
unstable_dataStrategy構成オプションを追加しました (#11098, #11377)@remix-run/router - 新しいfuture.unstable_skipActionRevalidationフラグを追加しました (#11098)@remix-run/router - SSR：Remixのシングルフェッチ実装で使用するために、静的ハンドラーによるエラーバブリングを無効にするstaticHandler.queryメソッドに新しいskipLoaderErrorBubblingオプションを追加しました (#11098, #11377)完全な変更ログ: v6.22.3...v6.23.0
日付: 2024年3月7日
future.v7_partialHydrationのバグを修正しました (#11324)future.v7_partialHydrationのバグを修正しました (#11325)完全な変更ログ: v6.22.2...v6.22.3
日付: 2024年2月28日
完全な変更ログ: v6.22.1...v6.22.2
日付: 2024年2月16日
完全な変更ログ: v6.22.0...v6.22.1
日付: 2024年2月1日
2021年、HTTP Archiveはコアウェブバイタルテクノロジーレポートダッシュボードを立ち上げました。
Chrome UX Report 26 (CrUX) データセットにおける実ユーザーエクスペリエンスのパワーと、HTTP Archive 30におけるWebテクノロジー検出機能を組み合わせることで、CMSプラットフォームやJavaScriptフレームワークの選択といったアーキテクチャ上の意思決定が、サイトのCWVパフォーマンスにどのように影響するかを垣間見ることができます。
彼らはwappalyzerというツールを使用して、特定のスクリプト、グローバルJS変数、またはその他の識別特性を探すことで、特定のウェブサイトが使用しているテクノロジーを特定しています。たとえば、Remixアプリケーションの場合、グローバル変数__remixContextを検索して、ウェブサイトがRemixを使用していることを識別します。
グローバルな識別要素がないため、React Routerを確実に識別できないという問題が指摘されました。現在、彼らは名前にreact-routerを含む外部スクリプトを検索しています。これにより、unpkgなどのCDNからReact Routerを使用しているサイトは識別できますが、npmレジストリからReact RouterをインストールしてJSファイルにバンドルしているサイトの圧倒的多数は検出されません。この結果、Web上でのReact Routerの使用量が大幅に過小報告されています。
バージョン6.22.0以降、react-router-domを使用するサイトは、window.__reactRouterVersion変数を追加するようになります。この変数には、SemVerメジャーバージョン番号の文字列値が設定されます（例：window.__reactRouterVersion = "6";）。これにより、適切に識別できるようになります。
window.__reactRouterVersionを含める (#11222)Error（例：new Error("query() call aborted: GET /path")）ではなく、request.signal.reason（デフォルトはDOMException）をスローするcreateStaticHandlerのfuture.v7_throwAbortReasonフラグを追加する (#11104)DOMExceptionが追加されたため、Node 16以前ではDOMExceptionは取得されません。getStaticContextFormErrorに渡されたErrorResponseのステータスコードを尊重する (#11213)完全な変更ログ: v6.21.3...v6.22.0
日付: 2024-01-18
basenameを使用する場合のNavLinkのisPendingを修正する (#11195)Blocker/BlockerFunction型から残りのunstable_プレフィックスを削除する (#11187)完全な変更ログ: v6.21.2...v6.21.3
日付: 2024-01-11
useIdを活用する (#11166)完全な変更ログ: v6.21.1...v6.21.2
日付: 2023-12-21
v7_partialHydrationが指定されている場合、初期SPAロードでroute.lazyが正しく動作しないバグを修正する (#11121)submittingフェーズ中にアンマウントされた永続化されたフェッチャに対して再検証が行われないバグを修正する (#11102)resolveToにおける相対パスロジックの重複を解消する (#11097)完全な変更ログ: v6.21.0...v6.21.1
日付: 2023-12-13
future.v7_relativeSplatPath6.19.0でスプラットルートのパス解決のバグを修正しましたが、その後、多数のアプリケーションがバグのある動作に依存していることが判明したため、6.20.1で修正を元に戻しました（#10983、#11052、#11078を参照）。
バグのある動作とは、スプラットルート内の相対パスを解決する場合のデフォルトの動作で、現在のルートパスのスプラット（*）部分を無視することです。将来のフラグが有効になっている場合、スプラット部分はスプラットルート内の相対パスロジックに含まれます。
詳細については、useResolvedPathドキュメントまたは詳細な変更ログエントリを参照してください。
サーバーサイドレンダリング時にデータルーターの部分的なハイドレーションを有効にする@remix-run/router用の新しいfuture.v7_partialHydration将来のフラグを追加しました。これにより、一部の最初に一致したルートローダーには値があるが、すべてではないhydrationData.loaderDataを提供できます。このフラグが有効になっている場合、ルーターはrouter.initialize()中にハイドレーションローダーデータを持たないルートのloader関数を呼び出し、ハイドレーションデータのない最初のルートまで（最も深いHydrateFallbackまで）、未ハイドレーションのルートを実行しながらレンダリングします。(#11033)
future.v7_relativeSplatPathフラグを追加します。(#11087)future.v7_partialHydration将来のフラグを追加します (#11033)ErrorBoundaryで偽のエラー値を適切に処理する (#11071)loader/action関数からレスポンスをアンラップしようとしたときにスローされたエラーをキャッチしてバブルアップする (#11061)Link/NavLinkをレンダリングする場合のrelative="path"の問題を修正する (#11062)完全な変更ログ: v6.20.1...v6.21.0
日付: 2023-12-01
useResolvedPath修正を元に戻しました（#11052を参照）(#11078)6.19.0と6.20.0に含まれていました。6.18.0以前からアップグレードしている場合は、この修正の影響を受けていません。完全な変更ログ: v6.20.0...v6.20.1
日付: 2023-11-22
[!警告]
6.20.0の代わりに6.20.1以降を使用してください。このリリースで修正されたバグのある動作に多数のアプリが依存していることがわかりました(#11045)。6.20.1で修正を元に戻し、後続のリリースで将来のフラグを付けて再導入する予定です。#11052で詳細を確認してください。
PathParam型をエクスポートする (#10719)v7_fetcherPersistが有効になっている場合、アンマウントされたフェッチャを再検証しない (#11044)resolveToパス解決のバグを修正する (#11045)getPathContributingMatchesを使用するその他のコードパスを処理します。@remix-run/routerからUNSAFE_getPathContributingMatchesエクスポートが削除されます。これはreact-router/react-router-domレイヤーでは不要になったためです。完全な変更ログ: v6.19.0...v6.20.0
日付: 2023-11-16
[!警告]
6.19.0の代わりに6.20.1以降を使用してください。このリリースで修正されたバグのある動作に多数のアプリが依存していることがわかりました(#10983)。6.20.1で修正を元に戻し、後続のリリースで将来のフラグを付けて再導入する予定です。#11052で詳細を確認してください。
unstable_flushSync APIこのリリースでは、新しいunstable_flushSyncオプションが命令型API（useSubmit、useNavigate、fetcher.submit、fetcher.load）に追加され、保留中/楽観的なUIの同期的なDOM更新を選択できるようになりました。
function handleClick() {
submit(data, { flushSync: true });
// Everything is flushed to the DOM so you can focus/scroll to your pending/optimistic UI
setFocusAndOrScrollToNewlyAddedThing();
}
useNavigate/useSubmit/fetcher.load/fetcher.submitにunstable_flushSyncオプションを追加し、状態更新に対してReact.startTransitionではなくReactDOM.flushSyncを使用するオプションを導入しました。(#11005)useBlockerフックからunstable_プレフィックスを削除しました。APIとして十分な期間使用されており、信頼できるものと判断したためです。(#10991)window.confirmの処理の違いにより、React Routerが常に一貫性のある/正しい動作を保証できないため、unstable_usePromptからプレフィックスを削除する予定はありません。useActionDataを修正し、ツリー内の任意のアクションデータではなく、適切なコンテキストアクションデータが返されるようにしました。(#11023)
useResolvedPathのバグを修正しました。このバグにより、スプラットルート内でuseResolvedPath(".")を使用すると、URLパスのスプラット部分が失われていました。(#10983)
"."パスに固有の、長年にわたるバグを修正するものです。このバグにより、URLのスプラット部分が誤って削除されていました。アプリケーションでスプラットルート内で"."を使用して相対ルーティングを行っている場合は、ロジックがこのバグのある動作に依存していないことを再確認し、必要に応じて更新してください。マウントされたままのuseFetcher内のfetcherのkeyが変更されても反映されない問題を修正しました。(#11009)
useFormActionを修正しました。これは、子ルートのアクション送信から?indexクエリパラメータを誤って継承していました。(#11025)
toロケーションに末尾のスラッシュがある場合のNavLinkのactiveロジックを修正しました。(#10734)
型を修正し、unstable_usePromptがbooleanに加えてBlockerFunctionを受け入れられるようにしました。(#10991)
relative="path"のバグを修正しました。このバグにより、相対パスの計算が現在のコンテキストルートのパス名ではなく、完全なロケーションパス名から開始されていました。(#11006)
<Route path="/a">
<Route path="/b" element={<Component />}>
<Route path="/c" />
</Route>
</Route>;
function Component() {
return (
<>
{/* This is now correctly relative to /a/b, not /a/b/c */}
<Link to=".." relative="path" />
<Outlet />
</>
);
}
完全な変更ログ: 6.18.0...6.19.0
日付: 2023-10-31
このRFCに従い、Fetcherの動作をより詳細に制御できる新しいAPIを導入しました。
useFetcher({ key: string })を使用して独自のfetcher識別子を指定できるようになりました。これにより、プロップドリリングを行わずに、アプリケーション内の異なるコンポーネントから同じfetcherインスタンスにアクセスできます。useFetchersから返されるfetcherにfetcherキーが公開されるようになったため、キーで検索できるようになりました。FormとuseSubmitは、オプションのnavigate/fetcherKeyプロップ/パラメータをサポートするようになりました。これにより、オプションでユーザーが指定したキーを使用して、内部でfetcher送信を開始できます。<Form method="post" navigate={false} fetcherKey="my-key">submit(data, { method: "post", navigate: false, fetcherKey: "my-key" })useFetchers()またはuseFetcher({ key })を使用して他の場所で検索する必要があります。future.v7_fetcherPersist)上記と同じRFCに従い、新しいfuture.v7_fetcherPersistフラグを導入しました。これにより、新しいfetcherの永続性/クリーンアップ動作をオプトインできます。アンマウント時にすぐにクリーンアップされるのではなく、fetcherはidle状態に戻るまで保持されます。これにより、発信元のfetcherをアンマウントする必要があるシナリオでの保留中の/楽観的なUIが大幅に容易になります。
useFetchers()APIは、保留中の/楽観的なUIのために常に**進行中の**fetcher情報のみを反映するように意図されていました。完了後にfetcherデータまたはfetcherを保持することは意図されていませんでした。useFetchers()に表示されなくなります。useFetcher().dataを介してデータにアクセスできるため、そこには目的がありません。idle状態に戻るまでクリーンアップされます。useFetchersを介して公開されたままであるため、アンマウント後も保留中の/楽観的なデータにアクセスできます。keyを使用してツリーの他の場所でfetcherが再マウントされた場合、発信元のfetcherがアンマウントされていても、その結果は処理されます。key APIとnavigate=falseオプションを追加しました。(#10960)future.v7_fetcherPersistフラグを追加しました。(#10962)matchPathでオプションのパスセグメントをサポートしました。(#10768)BrowserRouter、HashRouter、MemoryRouterのfutureプロップを修正し、すべてのフラグを含める必要なくPartial<FutureConfig>を受け入れるようにしました。(#10962)router.getFetcher/router.deleteFetcherの型定義を修正しました。これらは、keyをオプションのパラメータとして誤って指定していました。(#10960)完全な変更ログ: 6.17.0...6.18.0
日付: 2023-10-16
React Routerでビュー遷移APIの実験的なサポートをリリースできることを嬉しく思います！これで、アプリケーションのSPAナビゲーションでCSSアニメーション遷移を有効にするために、ナビゲーションDOMの更新をdocument.startViewTransitionでラップできます。
React Routerアプリケーションでビュー遷移を有効にする最も簡単な方法は、新しい<Link unstable_viewTransition>プロップを使用することです。これにより、ナビゲーションDOMの更新がdocument.startViewTransitionでラップされ、DOM更新の遷移が有効になります。追加のCSSスタイルがなくても、ページの基本的なクロスフェードアニメーションが得られます。
アニメーションに対してより詳細なスタイルを適用する必要がある場合は、unstable_useViewTransitionStateフックを使用できます。これにより、遷移が進行中かどうかがわかります。これを使用して、クラスまたはスタイルを適用できます。
function ImageLink(to, src, alt) {
const isTransitioning = unstable_useViewTransitionState(to);
return (
<Link to={to} unstable_viewTransition>
<img
src={src}
alt={alt}
style={{
viewTransitionName: isTransitioning ? "image-expand" : "",
}}
/>
</Link>
);
}
<NavLink unstable_viewTransition>ショートハンドも使用できます。これにより、フックの使用が管理され、遷移中に<a>にtransitioningクラスが自動的に追加されます。
a.transitioning img {
view-transition-name: "image-expand";
}
<NavLink to={to} unstable_viewTransition>
<img src={src} alt={alt} />
</NavLink>
ビュー遷移の使用例については、素晴らしいAstro Recordsデモのフォークをご覧ください。
ビュー遷移APIの使用の詳細については、Google Chromeチームのビュー遷移APIを使用したスムーズでシンプルな遷移ガイドを参照してください。
sessionStorageが使用できない場合、ScrollRestorationで警告をログ出力し、正常に失敗するようにしました。(#10848)RouterProviderのfutureプロップ型をPartial<FutureConfig>に変更し、すべてのフラグを指定する必要がなくなりました。(#10900)ErrorResponse型を修正しました。(#10876)完全な変更ログ: 6.16.0...6.17.0
日付: 2023-09-13
anyの使用をunknownに置き換えることを目指しています。Remix v2でReact Router v6で破壊的な変更を導入せずにこれを行うために、いくつかの共有型にジェネリックを追加しました。これらはReact Routerではanyにデフォルト設定され、Remixではunknownで上書きされます。React Router v7では、これらを破壊的な変更としてunknownに移行する予定です。(#10843)Locationは、location.state値にジェネリックを受け入れるようになりました。ActionFunctionArgs/ActionFunction/LoaderFunctionArgs/LoaderFunctionは、contextパラメータにジェネリックを受け入れるようになりました（createStaticHandlerを介したSSRでのみ使用されます）。useMatches（現在はUIMatchとしてエクスポート）の戻り値型は、match.dataとmatch.handleにジェネリックを受け入れるようになりました。これらは両方とも既にunknownに設定されていました。@privateクラスエクスポートErrorResponseをUNSAFE_ErrorResponseImplエクスポートに移動しました。これは実装の詳細であり、ユーザーランドでErrorResponseインスタンスを構築するべきではないためです。これにより、InstanceTypeを介してクラスのインスタンスに関連付けられたtype ErrorResponseをエクスポートできます。ユーザーランドコードは、ErrorResponseを型としてのみ使用し、isRouteErrorResponseを使用して型を絞り込む必要があります。(#10811)ShouldRevalidateFunctionArgsインターフェースをエクスポートしました。(#10797)_isFetchActionRedirect、_hasFetcherDoneAnything）を削除しました。(#10715)query/queryRoute呼び出しのエラーメッセージにmethod/urlを追加しました。(#10793)route.lazyルートでのローダー/アクションによってスローされたエラーに関する競合状態を修正しました。(#10778)shouldRevalidateに渡される引数のオブジェクトのactionResultの型を修正しました。(#10779)完全な変更ログ: v6.15.0...v6.16.0
日付: 2023-08-10
loader/actionからのリダイレクト時に、React Router を介してリダイレクト先に移動しようとする代わりに、ドキュメントのリロード（window.locationを使用）をトリガーすることをユーザーが指定できる新しいredirectDocument()関数を追加しました（#10705）。useRevalidatorが参照的に安定するようにします（#10707）。URLSearchParamsとuseSearchParamsフックを使用するFirefoxのWebエクステンションに影響するエッジケースを修正しました（#10620）。unstable_usePromptのエフェクトの順序を変更しました（#10687、#10718）。useFormAction()にハッシュを含めないようにします。サーバーでは決定できず、ハイドレーションの問題を引き起こすためです（#10758）。Responseインスタンスを常に識別していなかったqueryRouteの問題を修正しました（#10717）。react-router-native: @ungap/url-search-paramsの依存関係を^0.1.4から^0.2.2に更新しました（#10590）。完全な変更ログ: v6.14.2...v6.15.0
日付: 2023-07-17
history.stateを設定するための、不足していた<Form state>プロパティを追加しました（#10630）。deferプロミスがundefinedで解決/拒否された場合にエラーをトリガーします。これは、値またはnullを返す必要があるローダーとアクションの動作と一致させるためです（#10690）。<ScrollRestoration>を介してハッシュスクロールをエミュレートする場合に、要素IDを適切にデコードします（#10682）。Route.lazyの戻り値の型を強化しました（#10634）。ReferenceError/TypeErrorなどのErrorサブクラスの適切なハイドレーションをサポートします（#10633）。完全な変更ログ: v6.14.1...v6.14.2
日付: 2023-06-30
unstable_useBlockerのループを修正しました（#10652）。@remix-run/router@1.7.1完全な変更ログ: v6.14.0...v6.14.1
日付: 2023-06-23
6.14.0では、クライアントサイドSPAで作業する場合に常にFormDataにシリアル化する必要がないため、useSubmit/fetcher.submitを介したJSONとテキストの送信がサポートされるようになりました。これらのエンコーディングを有効にするには、適切なformEncTypeを指定するだけです。
application/jsonエンコーディングを有効にします。
function Component() {
let navigation = useNavigation();
let submit = useSubmit();
submit({ key: "value" }, { method: "post", encType: "application/json" });
// navigation.formEncType => "application/json"
// navigation.json => { key: "value" }
}
async function action({ request }) {
// request.headers.get("Content-Type") => "application/json"
// await request.json() => { key: "value" }
}
text/plainエンコーディングを有効にします。
function Component() {
let navigation = useNavigation();
let submit = useSubmit();
submit("Text submission", { method: "post", encType: "text/plain" });
// navigation.formEncType => "text/plain"
// navigation.text => "Text submission"
}
async function action({ request }) {
// request.headers.get("Content-Type") => "text/plain"
// await request.text() => "Text submission"
}
⚠️ v7でデフォルトの動作が変更されます
破壊的な変更を避けるため、デフォルトの動作では、単純なキー/値のJSONオブジェクトは引き続きFormDataインスタンスにエンコードされることに注意してください。
function Component() {
let navigation = useNavigation();
let submit = useSubmit();
submit({ key: "value" }, { method: "post" });
// navigation.formEncType => "application/x-www-form-urlencoded"
// navigation.formData => FormData instance
}
async function action({ request }) {
// request.headers.get("Content-Type") => "application/x-www-form-urlencoded"
// await request.formData() => FormData instance
}
この動作はv7で変更される可能性があるため、v7への移行パスを容易にするために、JSONオブジェクトの送信はformEncType: "application/x-www-form-urlencoded"またはformEncType: "application/json"で明示的に行うことをお勧めします。
useSubmit/fetcher.submitにapplication/jsonとtext/plainエンコーディングのサポートを追加しました。これらの追加の型を反映するために、useNavigation/useFetcherには、該当する場合はjson/テキスト送信を含むnavigation.json/navigation.textとfetcher.json/fetcher.textも含まれるようになりました（#10413）。submitter要素からフォームを送信する場合、最新のブラウザ（新しいsubmitterパラメータをサポートするもの）では、以前の手動アプローチではなく、組み込みのnew FormData(form, submitter)を優先します（#9865）。type="image"ボタンの基本的なサポートも追加します。formdata-submitter-polyfillを使用できます。window.locationがuseLocationと一致するように、React Routerの状態を更新する*前*に（後ではなく）、window.history.pushState/replaceStateを呼び出します（#10448）。window.locationに依存せず、可能な限り常にuseLocationを参照する必要があります。window.locationは（popstateイベント、コンカレントモードなどにより）、常に同期しているとは限らないためです。shouldRevalidateを呼び出さないようにします（#10623）。useLocationの動作と一致させるために、<ScrollRestoration getKey>に提供されるlocationからbasenameを削除します（#10550）。useLocationの動作と一致させるために、unstable_useBlocker関数に提供されるlocationからbasenameを削除します（#10573）。StrictModeでのunstable_useBlockerのキーの問題を修正しました（#10573）。0値パラメータを渡された場合のgeneratePathを修正しました（#10612）。tsc --skipLibCheck:falseの問題を修正しました（#10622）。typescriptを5.1にアップグレードしました（#10581）。完全な変更ログ: v6.13.0...v6.14.0
日付: 2023-06-14
6.13.0は精神的にはパッチリリースですが、新しい将来のフラグを追加したため、SemVerマイナーバンプが伴います。
future.v7_startTransition要約は、6.13.0は6.12.0と同じですが、React.startTransitionの使用をオプトインfuture.v7_startTransition 将来のフラグ の背後に移動しました。これは、現在SuspenseをReact.startTransitionと互換性のない方法で使用しているアプリケーションが実在していることがわかったためです。
したがって、6.13.0では、デフォルトの動作はReact.startTransitionを利用しなくなります。
<BrowserRouter>
<Routes>{/*...*/}</Routes>
</BrowserRouter>
<RouterProvider router={router} />
React.startTransitionを有効にするには、将来のフラグをルーターコンポーネントに渡します。
<BrowserRouter future={{ v7_startTransition: true }}>
<Routes>{/*...*/}</Routes>
</BrowserRouter>
<RouterProvider router={router} future={{ v7_startTransition: true }}/>
Reactコンカレントモードとの互換性を向上させるために、できるだけ早くこのフラグを採用することをお勧めしますが、問題が発生した場合は、v7までReact.startTransitionを使用せずに続けることができます。問題は通常、レンダリングサイクル中に新しいプロミスを作成することに帰着するため、React.startTransitionをオプトインしたときに問題が発生した場合は、プロミスの作成をレンダリングサイクルから持ち上げるか、useMemoの背後に配置する必要があります。
React.startTransitionの使用を将来のフラグの背後に移動しました（#10596）。React.startTransitionのミニファイ化のバグの回避策を追加しました（#10588）。完全な変更ログ: v6.12.1...v6.13.0
日付: 2023-06-08
[!警告]
6.12.0/6.12.1の代わりに6.13.0以降のバージョンを使用してください。これらのバージョンでは、Webpackビルド/ミニファイ化の問題により、ビルドの失敗または本番バンドルでの無効なミニファイ化されたコードが発生しました。#10569と#10579で詳細を確認してください。
React.startTransitionの機能検出を調整しました（#10569）。完全な変更ログ: v6.12.0...v6.12.1
日付: 2023-06-06
[!警告]
6.12.0/6.12.1の代わりに6.13.0以降のバージョンを使用してください。これらのバージョンでは、Webpackビルド/ミニファイ化の問題により、ビルドの失敗または本番バンドルでの無効なミニファイ化されたコードが発生しました。#10569と#10579で詳細を確認してください。
React.startTransitionサポート6.12.0では、内部ルーターの状態更新をReact.startTransitionでラップすることで、コンポーネントの停止に対するサポートを強化しました。つまり、たとえば、宛先ルートのコンポーネントの1つが停止し、フォールバックを表示するSuspense境界を提供していない場合、Reactは新しいUIのレンダリングを遅延させ、非同期操作が解決されるまで古いUIを表示します。これは、画像やCSSファイルのロードを待機する場合などに役立ちます（技術的には、データのロードにも使用できますが、それでもローダーを使用することをお勧めします😀）。この使用方法の概要については、RyanのTwitterでのデモをご覧ください。
React.startTransitionでラップしました（#10438）。@remix-run/router@1.6.3（変更ログ）完全な変更ログ：v6.11.2...v6.12.0
日付：2023年5月17日
<RouterProvider> 内の descendant <Routes> における basename の重複を修正（#10492）SetURLSearchParams型をエクスポートする（#10444）_internalSetRoutes で新しいルートと manifest を適切に再構築することにより、Remix HMR で発生するエラーバウンダリを修正（#10437）完全な変更ログ：v6.11.1...v6.11.2
日付：2023年5月3日
<Routes> 内での Component API の使用を修正（#10434）<RouterProvider> 内の <Routes> から useNavigate を呼び出す際のバグを修正（#10432）<Navigate> の使用を修正（#10435）basename の処理を修正（#10433）/path#hash -> /path#hash）（#10408）完全な変更ログ：v6.11.0...v6.11.1
日付：2023年4月28日
useFetcher で basename サポートを有効化（#10336）basename をプレフィックスすることでこの問題を回避していた場合は、fetcher 呼び出しから手動でプレフィックスされた basename を削除する必要があります（fetcher.load('/basename/route') -> fetcher.load('/route')）@remix-run/router@1.6.0（変更ログ）RouterProvider を使用する場合、@remix-run/router インスタンスを介して相対ルーティングを処理し、useLocation()への依存関係をなくすことができるため、場所の変更にわたって useNavigate/useSubmit/fetcher.submit が安定します。（#10336）BrowserRouter を使用する場合、これらのフックは useLocation() に依存しているため、場所の変更にわたって不安定なままです。action の送信または router.revalidate の呼び出しでのみ再検証されます。（#10344）element の代わりに Component を使用する場合の意図しない再レンダリングを修正（#10287）<Link to="//"> およびその他の無効なURL値に対して、正常に処理エラーを発生させる（#10367）@remix-run/router ルーター状態の同期において、<RouterProvider> で useSyncExternalStore から useState に切り替えました。ルーター状態の更新が他の通常の useState 更新よりも前に伝播される微妙なバグ（微妙なバグ）がいくつか見つかりました。これにより、useEffect 呼び出しで問題が発生する可能性があります。（#10377、#10409）RouterProvider にエラーが存在する場合に、descendant <Routes> のレンダリングを妨げるバグを修正（#10374）activeRef を設定することにより、レンダリングサイクルでの useNavigate の検出を修正し、navigate 関数を子コンポーネントに渡してそこで useEffect で呼び出すことができるようにする（#10394）useRevalidator() を許可する（#10369）undefined が有効な戻り値にならないように、LoaderFunction/ActionFunction の戻り値の型を強化（#10267）loader がないルートへの fetcher.load 呼び出しで適切な 404 エラーを確保する（#10345）AbortController の使用を分離し、再検証中のフェッチャのアンマウント/削除が進行中のトリガーナビゲーション/再検証に影響を与えないようにする（#10271）完全な変更ログ：v6.10.0...v6.11.0
日付：2023年3月29日
最近、Remixブログで「将来にわたってRemixアプリケーションを保護する」というタイトルの記事(「将来にわたってRemixアプリケーションを保護する」)を発表しました。この投稿では、RemixとReact Routerアプリケーションの円滑なアップグレードを確保するための戦略について説明しています。React Router 6.10.0 は、ルーターの作成時に指定できるこれらのフラグ（データルーター用）のサポートを追加します。
const router = createBrowserRouter(routes, {
future: {
// specify future flags here
},
});
future.v7_normalizeFormMethod導入される最初の将来的なフラグは、fetch()（および一部のRemix）の動作に合わせて、公開されているuseNavigation()/useFetcher()のformMethodフィールドを大文字のHTTPメソッドに正規化するfuture.v7_normalizeFormMethodです。（#10207）
future.v7_normalizeFormMethodが未指定の場合、またはfalseに設定されている場合（デフォルトのv6の動作）、useNavigation().formMethodは小文字です。useFetcher().formMethodは小文字です。future.v7_normalizeFormMethod === trueの場合、useNavigation().formMethodは大文字です。useFetcher().formMethodは大文字です。createStaticHandlerを修正し、errorElementに加えてルートのErrorBoundaryもチェックするようにした（#10190）createRoutesFromElementsでフラグメントを使用する場合のルートID生成を修正（#10193）shouldRevalidateにフェッチャ送信を提供する（#10208）lazy()エラーを適切に処理する（#10201）DeferredDataのinstanceofチェックを削除（#10247）@remix-run/web-fetch@4.3.3に更新（#10216）完全な変更ログ：v6.9.0...v6.10.0
日付：2023年3月10日
Component/ErrorBoundary ルートプロパティReact Routerは、ルートのelementとerrorElementフィールドをReact要素の代わりにReactコンポーネントとして定義する代替方法をサポートするようになりました。必要に応じて、新しいComponentとErrorBoundaryフィールドにReactコンポーネントを渡すことができます。機能的な違いはありませんので、どちらの方法を使用しても構いません😀。両方を定義するべきではありませんが、定義した場合、Component/ErrorBoundaryが優先されます。
JSON構文の例
// Both of these work the same:
const elementRoutes = [{
path: '/',
element: <Home />,
errorElement: <HomeError />,
}]
const componentRoutes = [{
path: '/',
Component: Home,
ErrorBoundary: HomeError,
}]
function Home() { ... }
function HomeError() { ... }
JSX構文の例
// Both of these work the same:
const elementRoutes = createRoutesFromElements(
<Route path='/' element={<Home />} errorElement={<HomeError /> } />
);
const componentRoutes = createRoutesFromElements(
<Route path='/' Component={Home} ErrorBoundary={HomeError} />
);
function Home() { ... }
function HomeError() { ... }
アプリケーションバンドルを小さく保ち、ルートのコード分割をサポートするために、新しいlazy()ルートプロパティを導入しました。これは、ルートに一致しないルート定義の部分（loader、action、element/Component、errorElement/ErrorBoundary、shouldRevalidate、handle）を解決する非同期関数です。
遅延ルートは、初期読み込み時と、ナビゲーションまたはフェッチャ呼び出しのloadingまたはsubmittingフェーズで解決されます。既知のルートを一致させた後でしか遅延ルート関数を実行しないため、ルート一致プロパティ（path、index、children）を遅延定義することはできません。
lazy関数は通常、動的インポートの結果を返します。
// In this example, we assume most folks land on the homepage so we include that
// in our critical-path bundle, but then we lazily load modules for /a and /b so
// they don't load until the user navigates to those routes
let routes = createRoutesFromElements(
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="a" lazy={() => import("./a")} />
<Route path="b" lazy={() => import("./b")} />
</Route>
);
次に、遅延ルートモジュールで、ルートに対して定義するプロパティをエクスポートします。
export async function loader({ request }) {
let data = await fetchData(request);
return json(data);
}
// Export a `Component` directly instead of needing to create a React Element from it
export function Component() {
let data = useLoaderData();
return (
<>
<h1>You made it!</h1>
<p>{data}</p>
</>
);
}
// Export an `ErrorBoundary` directly instead of needing to create a React Element from it
export function ErrorBoundary() {
let error = useRouteError();
return isRouteErrorResponse(error) ? (
<h1>
{error.status} {error.statusText}
</h1>
) : (
<h1>{error.message || error}</h1>
);
}
動作の例は、リポジトリのexamples/lazy-loading-router-providerディレクトリにあります。詳細については、lazyドキュメントを参照してください。
🙌 @rossipediaによる最初の提案とPOC実装に多大な感謝を。
generatePathを修正（#10078）[react-router-dom-v5-compat] 欠落していたデータルーターAPIの再エクスポートを追加（#10171）完全な変更ログ：v6.8.2...v6.9.0
日付：2023年2月27日
basenameの外にある場合、<Link to>の同一オリジンの絶対URLを外部として扱う（#10135）basenameの外にある同一オリジンの絶対URLに対して、ハードリダイレクトを正しく実行する（#10076）<Link to>URLのSSRを修正（#10112）StaticRouterProviderシリアル化されたハイドレーションデータでHTML文字を適切にエスケープする（#10068）useBlockerがIDLE_BLOCKERを返すように修正（#10046）createStaticHandlerのquery()メソッドにおける、deferローダーレスポンスのステータスコードとヘッダーを維持します（#10077）invariantをUNSAFE_invariantエクスポートに変更しました（#10066）完全な変更ログ: v6.8.1...v6.8.2
日付: 2023年2月6日
Linkコンポーネントでの絶対URL検出を改善しました（mailto: URLにも対応）(#9994)完全な変更ログ: v6.8.0...v6.8.1
日付: 2023年1月26日
<Link to>で絶対URLをサポートしました。現在のオリジンに対するURLの場合は、クライアントサイドナビゲーションを実行します。異なるオリジンのURLの場合は、新しいオリジンに対して新しいドキュメントリクエストを実行します（#9900）
<Link to="https://neworigin.com/some/path"> {/* Document request */}
<Link to="//neworigin.com/some/path"> {/* Document request */}
<Link to="https://www.currentorigin.com/path"> {/* Client-side navigation */}
shouldRevalidate呼び出しの2つの別々の問題を修正しました（#9948）shouldRevalidate関数は、明示的な再検証シナリオ（ミューテーション後、手動useRevalidator呼び出し、またはRemixでのCookie設定に使用されるX-Remix-Revalidateヘッダー）でのみ呼び出されていました。ナビゲーションloaderの再検証にも適用される暗黙的な再検証シナリオ（検索パラメーターの変更や、現在表示されているページへのリンクのクリックなど）では、正しく呼び出されていませんでした。これら追加のシナリオでも正しく呼び出されるようになりました。current*/next*パラメーターは静的fetcher.load URLを反映していたため（したがって同一でした）。代わりに、再検証をトリガーしたナビゲーションを反映する必要があります（form*パラメーターが行っていたように）。これらのパラメーターは、トリガーされたナビゲーションを正しく反映するようになりました。useSearchParamsによる検索パラメーターの削除のバグを修正しました（#9969）<fetcher.Form>でpreventScrollResetを尊重するようになりました（#9963）<ScrollRestoration>でbeforeunloadの代わりにpagehideを使用するようになりました。これにより、クロスブラウザのサポート、特にモバイルSafariでのサポートが向上します（#9945）isRouteErrorResponseからinstanceofチェックを削除しました（#9930）defer呼び出しにクリティカルデータのみが含まれている場合を検出し、AbortControllerを削除します（#9965）File FormDataエントリに名前を値として送信します（#9867）react-router-dom-v5-compat - CompatRouterを使用する場合のSSR useLayoutEffect console.errorを修正しました（#9820）完全な変更ログ: v6.7.0...v6.8.0
日付: 2023年1月18日
unstable_useBlocker/unstable_usePromptフックを追加しました（#9709、#9932）<Form>にpreventScrollResetプロップを追加しました（#9886）useBeforeUnloadにパススルーイベントリスナーオプション引数を追加しました（#9709）generatePathを修正しました（#9764）<Await>を更新して、子関数戻り値の結果としてReactNodeを受け入れるようにしました（#9896）jsdomのバグ回避策を簡素化しました（#9824）完全な変更ログ: v6.6.2...v6.7.0
日付: 2023年1月9日
useIdの一貫性を確保しました（#9805）完全な変更ログ: v6.6.1...v6.6.2
日付: 2022年12月23日
完全な変更ログ: v6.6.0...v6.6.1
日付: 2022年12月21日
このマイナーリリースは、React Router-ing Remix の作業の一環としてRemixで新しいRouterProviderを接続したため、Data RouterのSSR APIを安定させることを主な目的としています。
createStaticHandler/createStaticRouter/StaticRouterProviderからunstable_プレフィックスを削除しました（#9738）useBeforeUnload()フックを追加しました（#9664）<Form method>とuseSubmitメソッド値をサポートしました（#9664）<button formmethod>フォーム送信の上書きを修正しました（#9664）replaceと、新しいパスへの送信時のPUSHを修正しました（#9734）errorElementでのuseLoaderDataの使用を防止しました（#9735）StaticRouterProviderからのErrorオブジェクトの適切なハイドレーションを行いました（#9664）hydrationDataを使用したSSRアプリの初期スクロール復元をスキップします（#9664）完全な変更ログ: v6.5.0...v6.6.0
日付: 2022年12月16日
このリリースでは、オプションのルートセグメントのサポートが導入されました。任意のパスセグメントの最後に「?」を追加すると、そのセグメント全体をオプションにすることができます。これは、静的セグメントと動的パラメーターの両方に有効です。
オプションパラメーターの例
<Route path=":lang?/about>は以下に一致します/:lang/about/about<Route path="/multistep/:widget1?/widget2?/widget3?">は以下に一致します/multistep/multistep/:widget1/multistep/:widget1/:widget2/multistep/:widget1/:widget2/:widget3オプションの静的セグメントの例
<Route path="/home?">は以下に一致します//home<Route path="/fr?/about">は以下に一致します/about/fr/about<Route path="prefix-:param">）への不正確な一致を停止し、スプラットパラメーターの動作と一致させました。以前この動作に依存していた場合は、useParams呼び出しサイトでパスの静的部分を抽出することをお勧めします（#9506）// Old behavior at URL /prefix-123
<Route path="prefix-:id" element={<Comp /> }>
function Comp() {
let params = useParams(); // { id: '123' }
let id = params.id; // "123"
...
}
// New behavior at URL /prefix-123
<Route path=":id" element={<Comp /> }>
function Comp() {
let params = useParams(); // { id: 'prefix-123' }
let id = params.id.replace(/^prefix-/, ''); // "123"
...
}
actionリクエスト後のloader requestのheadersを保持します（#9721）完全な変更ログ: v6.4.5...v6.5.0
日付: 2022年12月7日
GETリクエストを反映するように修正しました（#9680）instanceof Response チェックを isResponse に変更しました (#9690)URL 作成の修正 (#9682, #9689)query/queryRoute に requestContext サポートを追加しました (#9696)queryRoute(path, routeId) が queryRoute(path, { routeId, requestContext }) に変更されたことに注意してください。完全な変更ログ: v6.4.4...v6.4.5
日付: 2022-11-30
action/loader 関数が undefined を返す場合、エラーをスローします。再検証では、ローダーが以前に実行されたかどうかを知る必要があるためです。undefined は、SSR 文字列化でもハイドレーション中に問題を引き起こします。常に loader/action が値を返すようにし、何も返したくない場合は null を返すことができます。(#9511)basename のサポート (#9591)ErrorResponse 本体 を拡張しました。NavLink および子孫の <Routes> でのエンコード文字に関する問題の修正 (#9589, #9647)ErrorResponse インスタンスの適切なシリアル化/デシリアル化 (#9593)basename のサポート (#9591)@remix-run/router@1.0.4react-router@6.4.4完全な変更ログ: v6.4.3...v6.4.4
日付: 2022-11-01
createHashRouter を使用する場合の正しい <a href> 値の生成 (#9409)path がある場合の正しい formAction パス名の生成 (#9486)NavLink の relative=path プロパティの尊重 (#9453)NavLink の動作の修正 (#9497)locationArg を渡す場合、useRoutes は null を返すことができます (#9485)createMemoryRouter の initialEntries タイプの修正 (#9498)loader/action リダイレクトでの basename と相対ルーティングのサポート (#9447)action 関数を検索する際のパスレスレイアウトルートの無視 (#9455)@remix-run/router のUMDビルドの追加 (#9446)createURL の修正 (#9464)完全な変更ログ: v6.4.2...v6.4.3
日付: 2022-10-06
useFormAction での basename の尊重 (#9352)hasErrorElement をオプションにするための IndexRouteObject と NonIndexRouteObject タイプの修正 (#9394)RouteObject/RouteProps タイプを強化しました。(#9366)完全な変更ログ: v6.4.1...v6.4.2
日付: 2022-09-22
完全な変更ログ: v6.4.0...v6.4.1
日付: 2022-09-13
これは大きな変更です！6.4.0 は、Remix からすべてのデータ読み込みと変更APIを導入します。概要を簡単に説明しますが、ドキュメント、特に機能概要とチュートリアルを確認することをお勧めします。
新しい react-router API
createMemoryRouter を使用してルーターを作成します。<RouterProvider> を使用してルーターをレンダリングします。loader を使用してデータを読み込み、ルート action を使用して変更します。errorElement を使用してエラーを処理します。defer と Await を使用して重要なでないデータを遅延させます。新しい react-router-dom API
createBrowserRouter/createHashRouter を使用してルーターを作成します。<Form> コンポーネントを使用してデータを送信します。useFetcher() を使用してページ内データの読み込みと変更を実行します。defer と Await を使用して重要なでないデータを遅延させます。<ScrollRestoration> を使用してスクロール位置を管理します。<Link relative="path"> を使用してパス相対ナビゲーションを実行します (#9160)useLocation は、<Routes location> コンポーネント内のスコープされた場所を返します (#9094)<Link replace> プロパティを尊重します (#8779)完全な変更ログ: v6.3.0...v6.4.0
日付: 2022-03-31
完全な変更ログ: v6.2.2...v6.3.0
日付: 2022-02-28
完全な変更ログ: v6.2.1...v6.2.2
日付: 2021-12-17
history 依存関係を 5.2.0 に更新しています。完全な変更ログ: v6.2.0...v6.2.1
日付: 2021-12-17
完全な変更ログ: v6.1.1...v6.2.0
日付: 2021-12-11
HistoryRouter を unstable_HistoryRouter としてフラグ付けしました。完全な変更ログ: v6.1.0...v6.1.1
日付: 2021-12-10
<Outlet> は、context プロップを受け取ることができるようになりました。この値は子ルートに渡され、新しい useOutletContext フックを介してアクセスできます。API ドキュメント を参照してください。(#8461)<NavLink> は、プロパティにアクセスするための子関数を受け取ることができるようになりました。(#8164)useMatch と matchPath の TypeScript シグネチャを改善しました。たとえば、useMatch("foo/:bar/:baz") を呼び出すと、パスが解析され、戻り値の型は PathMatch<"bar" | "baz"> になります。(#8030)完全な変更ログ: v6.0.2...v6.1.0
日付: 2021-11-09
<Link> に reloadDocument プロップを追加しました。これにより、相対的な to 解像度を維持しながら、ナビゲーション後にドキュメントをリロードすることで、<Link> が通常のアンカータグのように機能するようになります (#8283)完全な変更ログ: v6.0.1...v6.0.2
日付: 2021-11-05
<StaticRouter location> 値を追加しました (#8243)<Routes> 内で <Route> を使用するための不変量を追加して、人々が変更を行うのを支援しました (#8238)完全な変更ログ: v6.0.0...v6.0.1
日付: 2021-11-03
React Router バージョン6 リリース
バージョン6の新機能の詳細については、ブログ記事をご確認ください。 React Router バージョン5およびReach Routerからのアップグレード方法については、こちらを参照してください。