Question

我正在尝试使用React-Router 5.1和功能组件中的useParams挂钩在URL中传递多个参数。

但是我遇到了非常奇怪的行为。

我将网址粘贴到客户端中。

网址：

 http://localhost:3000/onboarding/eventId=5e9a173f9166f800128c04d1&groupId=5e9a173f9166f800128c04dc&userId=5e9a173f9166f800128c04da

路径：

<Route path = '/onboarding/:eventId?/:groupId?/:userId?' exact component = {OnboardingViewController} />

奇怪的事情＃1：我必须将参数设为可选，否则浏览器将永远挂起。

我使用以下所有策略将它们淘汰：

    var   {  eventId, groupId, userId } = useParams();
    var   {  eventId } = useParams();
    var   {  groupId } = useParams();
    var   {  userId  } = useParams();

奇怪的事情＃2：不幸的是，当尝试使用这些参数时会发生这种情况：

{userId: undefined, eventId: "eventId=5e9a173f9166f800128c04d1&groupId=5e9a173f9166f800128c04dc&userId=5e9a173f9166f800128c04da", groupId: undefined}

该钩子仅获取第一个参数，然后将其余部分解释为te的一部分。

奇怪的事情＃3：由于添加了此url参数查询，访问页面Laoding的过程非常缓慢，需要几秒钟。

我没看到什么，做错了什么？

答案：

我做错了什么：我正在使用url / eventId = 123。错了您只需要在URL url / 1/2/3中的正确位置提供资源即可。

正确：

http://localhost:3000/onboarding/5e9aaf4fc27583001190834e/5e9aaf60c275830011908361/5e9aaf4fc275830011908357

然后，您告诉路由器这些东西将称为eventId＆groupId＆userId。

 <Route path = '/onboarding/:eventId/:groupId/:userId' exact component = {OnboardingViewController} />

然后，您可以使用userPrams（）挂钩在组件中访问它们。

var  { eventId,  groupId, userId } = useParams();

谢谢大家！

Answer 1

您正在将匹配参数与URL查询参数混在一起。

可以使用location钩子从useLocation对象中检索URL查询参数。

给出网址http://localhost:3000/onboarding/?eventId=5e9a173f9166f800128c04d1&groupId=5e9a173f9166f800128c04dc&userId=5e9a173f9166f800128c04da

{
  pathname: '/onboarding/',
  search: '?eventId=5e9a173f9166f800128c04d1&groupId=5e9a173f9166f800128c04dc&userId=5e9a173f9166f800128c04da'
}

虽然需要一条路线path="/onboarding/"

您可以使用QueryParameter处理库将它们转换为地图对象。

如果您可以通过以下形式对URL进行按摩： http://localhost:3000/onboarding/5e9a173f9166f800128c04d1/5e9a173f9166f800128c04dc/5e9a173f9166f800128c04da

然后，路由path='/onboarding/:eventId/:groupId/:userId'可以匹配useParams返回的路径参数。

const { eventId, groupId, userId } = useParams();

Answer 2

您的路线结构和路线不匹配

如果您想在URL中使用参数， http://localhost:3000/onboarding/5e9a173f9166f800128c04d1/5e9a173f9166f800128c04dc/5e9a173f9166f800128c04da

您的Route组件将是：

<Route path = '/onboarding/:eventId/:groupId/:userId' exact component = {OnboardingViewController} />

然后您可以在OnboardingViewController组件中使用它：

 var   {  eventId, groupId, userId } = useParams();
 console.log(eventId,groupId,userId)

使用useParams（）挂钩获取多个URL参数

2 个答案: