`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 钩子的原始逻辑对于 splat 路径的行为不同，事后看来这是不正确/有缺陷的行为。请参阅 React Router 文档以获取更长的解释，但这被确定为“破坏性错误修复”，并且在 React Router 中的未来标志之后进行了修复，并通过 Remix 中的 v3_relativeSplatPath Future Flag 暴露出来。这将在 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