在 react-router-v6 中访问元素外的 URL 参数

【问题标题】：Accessing a URL parameter outside the element in react-router-v6在 react-router-v6 中访问元素外的 URL 参数
【发布时间】：2021-11-15 22:40:00
【问题描述】：

问题：我需要在 v6 中访问外部组件的 URL 参数。

我知道我可以在组件内部使用useParams() 挂钩，但是如果我需要访问组件外部的 URL 参数怎么办？

这是我在第 5 版中的做法：

// v5:
 
    <Route
        path = "/blog/:id" 
        render = {
            ({match:{params}}) => <Post item={ getPostById(params.id) } />
        }
    />

我正在访问< Post /> 组件之外的:id 参数。

如何在 v6 中编写之前的代码？

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

使用({match:{params}}) => <Post item={ getPostById(params.id) } />，您有效地编写了一个匿名 React 组件，该组件使用 match 属性并呈现您的 Post 组件。

如果您的组件无法使用 useParams 挂钩，请编写一个包装函数组件，该组件从 useParams 挂钩中读取 id 参数并传递 id。

const PostWithIdParam = () => {
  const { id } = useParams();
  return <Post item={getPostById(id)} />;
};

...

<Route
  path="/blog/:id" 
  element={<PostWithIdParam />}
/>

【讨论】：