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 文档 以获取更详细的解释，但这被确定为“重大错误修复”，并在 React Router 的一个未来标志后面修复，并通过 Remix 中的 v3_relativeSplatPath 未来标志公开。这将在 Remix v3 中成为默认行为，因此建议您在方便时更新您的应用程序，以便为最终的 v3 升级做好更好的准备。

需要注意的是，这是 Remix 中所有相对路由的基础，因此这也适用于以下相对路径代码流

• <Link to>
• useNavigate()
• useHref()
• <Form action>
• useSubmit()
• 从加载器和操作返回的相对路径 redirect 响应

未启用标志时的行为

当未启用此标志时，默认行为是在解析通配符路由内的相对路径时，会忽略路径的通配符部分。因此，在 routes/dashboard.$.tsx 文件中，useResolvedPath(".") 将解析为 /dashboard，即使当前 URL 为 /dashboard/teams。

启用标志时的行为

当您启用此标志时，此“错误”将被修复，以便路径解析在所有路由类型中保持一致，并且 useResolvedPath(".") 始终解析为上下文路由的当前路径名。这包括任何动态参数或通配符参数值，因此在 routes/dashboard.$.tsx 文件中，当当前 URL 为 /dashboard/teams 时，useResolvedPath(".") 将解析为 /dashboard/teams。

其他资源

• resolvePath