useParams

摘要

返回一个包含当前 URL 中由路由匹配的动态参数的键/值对对象。子路由会继承其父路由的所有参数。

假设路由模式 /posts/:postId 匹配了 /posts/123，那么 params.postId 的值将是 "123"。

import { useParams } from "react-router";

function SomeComponent() {
  let params = useParams();
  params.postId;
}

签名

function useParams<
  ParamsOrKey extends string | Record<string, string | undefined> = string,
>(): Readonly<
  [ParamsOrKey] extends [string] ? Params<ParamsOrKey> : Partial<ParamsOrKey>
>

一个包含动态路由参数的对象

示例

基本用法

import { useParams } from "react-router";

// given a route like:
<Route path="/posts/:postId" element={<Post />} />;

// or a data route like:
createBrowserRouter([
  {
    path: "/posts/:postId",
    component: Post,
  },
]);

// or in routes.ts
route("/posts/:postId", "routes/post.tsx");

在组件中访问参数

import { useParams } from "react-router";

export default function Post() {
  let params = useParams();
  return <h1>Post: {params.postId}</h1>;
}

多个参数

模式可以有多个参数

"/posts/:postId/comments/:commentId";

所有参数都将在 params 对象中可用

import { useParams } from "react-router";

export default function Post() {
  let params = useParams();
  return (
    <h1>
      Post: {params.postId}, Comment: {params.commentId}
    </h1>
  );
}

捕获所有参数

捕获所有参数使用 * 定义

"/files/*";

匹配的值将在 params 对象中按如下方式可用

import { useParams } from "react-router";

export default function File() {
  let params = useParams();
  let catchall = params["*"];
  // ...
}

您可以解构捕获所有参数

export default function File() {
  let { "*": catchall } = useParams();
  console.log(catchall);
}