useResolvedPath

このコンテンツはまだ日本語訳がありません。

`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 Paths

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