useResolvedPath

現在のロケーションのパス名に対して、与えられたto値のpathnameを解決し、Pathオブジェクトを返します。

import { useResolvedPath } from "@remix-run/react";
 
function SomeComponent() {
  const path = useResolvedPath("../some/where");
  path.pathname;
  path.search;
  path.hash;
  // ...
}

これは、相対値からリンクを作成する場合に役立ち、内部的に<NavLink>で使用されます。

スプラットパス

React RouterのuseResolvedPathフックの元のロジックは、スプラットパスに対しては異なる動作をしていましたが、後になって不正確/バグのある動作であることがわかりました。より詳細な説明については、React Router Docsを参照してください。これは、「バグ修正」であると判断され、React Routerでは将来のフラグの背後で修正され、Remixのv3_relativeSplatPath Future Flagを通じて公開されました。これは、Remix v3でデフォルトの動作になるため、v3へのアップグレードに備えて、アプリケーションを適宜更新することをお勧めします。

これは、Remixのすべての相対ルーティングの基礎となるため、以下の相対パスコードフローにも適用されます。

• <Link to>
• useNavigate()
• useHref()
• <Form action>
• useSubmit()
• ローダーとアクションから返される相対パスのredirectレスポンス

フラグが有効になっていない場合の動作

このフラグが有効になっていない場合、デフォルトの動作は、スプラットルート内の相対パスを解決する場合、パスのスプラット部分は無視されます。そのため、routes/dashboard.$.tsxファイル内では、useResolvedPath(".")は、現在のURLが/dashboard/teamsであっても/dashboardに解決されます。

フラグが有効になっている場合の動作

フラグを有効にすると、この「バグ」が修正されるため、パスの解決はすべてのルートタイプで一貫性があり、useResolvedPath(".")は、コンテキストルートの現在のパス名に常に解決されます。これには、ダイナミックパラメーターまたはスプラットパラメーターの値も含まれます。そのため、routes/dashboard.$.tsxファイル内では、useResolvedPath(".")は、現在のURLが/dashboard/teamsの場合、/dashboard/teamsに解決されます。

追加のリソース

• resolvePath