小编Arn*_*ave的帖子

我正在尝试使用 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 params 查询访问页面加载非常慢，需要几秒钟。

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

回答：

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

正确的：

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

然后告诉路由器这些东西将被称为 eventId & groupId & userId。 …