useParams

useParams在路由组件中用于从动态路由路径中获取以键值对组织起来的动态参数。能够被useParams获取到的参数都是在Route组件的path属性中定义的。动态参数的定义方法在React Router 6中没有改变，还是使用:paramName的形式定义，其中paramName就将成为存放动态参数键值对中用于保存参数值的键。

useParams的函数签名如下，其实是比较简单的一个Hook函数。

type Params<Key extends string = string> = {
  readonly [key in Key]: string | undefined;
};

declare function useParams<K extends string = string>(): ReadOnly<Params<K>>;

这里需要注意的是如果在嵌套路由的子路由中使用这个Hook，那么它也会获取到其父路由定义的动态参数。以下是一个具有两层嵌套路由而且使用了动态参数的参数值获取示例。

function UserOrders() {
  let { userId, startDate, endDate } = useParams();

  // 这里以下可以放置具体的应用业务逻辑。
}

function AppRoutes() {
  return (
    <Routes>
      <Route path="user">
        <Route path=":userId" element={<UserProfile />}>
          <Route path=":startDate/:endDate" element={<UserOrders />} />
        </Route>
      </Route>
    </Routes>
  );
}