useResolvedPath

解析給定 to 值相對於目前位置路徑名稱的 pathname，並傳回一個 Path 物件。

import { useResolvedPath } from "@remix-run/react";

function SomeComponent() {
  const path = useResolvedPath("../some/where");
  path.pathname;
  path.search;
  path.hash;
  // ...
}

當從相對值建立連結時，這非常有用，並且在內部用於 <NavLink>。

Splat 路徑

React Router 的 useResolvedPath hook 的原始邏輯對於 splat 路徑的行為有所不同，事後看來這是錯誤/有缺陷的行為。請參閱 React Router 文件以獲得更詳細的說明，但這被確定為「破壞性的錯誤修復」，並在 React Router 中透過未來標記進行修復，並透過 Remix 中的 v3_relativeSplatPath 未來標記公開。這將成為 Remix v3 中的預設行為，因此建議您方便時更新應用程式，以便更好地為最終的 v3 升級做好準備。

應注意，這是 Remix 中所有相對路由的基礎，因此這也適用於以下相對路徑程式碼流程

• <Link to>
• useNavigate()
• useHref()
• <Form action>
• useSubmit()
• 從載入器和動作傳回的相對路徑 redirect 回應

不使用標記的行為

當未啟用此標記時，預設行為是在 splat 路由內解析相對路徑時，路徑的 splat 部分會被忽略。因此，在 routes/dashboard.$.tsx 檔案中，即使目前的 URL 是 /dashboard/teams，useResolvedPath(".") 也會解析為 /dashboard。

使用標記的行為

當您啟用此標記時，此「錯誤」會被修復，以便路徑解析在所有路由類型中保持一致，並且 useResolvedPath(".") 始終解析為上下文路由的目前路徑名稱。這包括任何動態參數或 splat 參數值，因此在 routes/dashboard.$.tsx 檔案中，當目前的 URL 是 /dashboard/teams 時，useResolvedPath(".") 會解析為 /dashboard/teams。

其他資源

• resolvePath