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

Question

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

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

这就是我在版本5:中的做法

// v5:

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

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

如何在v6中编写以前的代码

Answer 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 />}
/>