使用useParams()钩子获取多个URL参数

Question

我正在尝试在React-Router 5.1中使用useParams钩子函数在函数组件中传递多个参数。

然而我遇到了非常奇怪的行为。

我将url粘贴到客户端中。

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}

这个钩子只取第一个参数，并将其余的解释为第一个参数的一部分。

奇怪的事情 #3： 自从添加了这个url参数查询后，访问页面加载变得非常缓慢，需要多秒钟的时间。

我做错了什么？ 答案：

我做错的地方： 我使用了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();

谢谢大家！

- Arne Oldenhave

---

你把“params”和“search”搞混了。如果URL是/onboarding/1/2/3/，那么useParams的结果将是{ eventId: 1, groupId: 2 userId: 3 }。 - azium

谢谢您的回答，但我仍然不理解。var params = useParams();var userId = params.userId // 应该可以工作但是params未定义。 - Arne Oldenhave

Answer 1

你的路由结构和路径不匹配

如果你想在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)

- Adrian Naranjo

Answer 2

您混淆了匹配参数和URL查询参数。

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

给定的URL为http://localhost:3000/onboarding/?eventId=5e9a173f9166f800128c04d1&groupId=5e9a173f9166f800128c04dc&userId=5e9a173f9166f800128c04da。

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

不过需要一个路由 path="/onboarding/"

您可以使用一个QueryParameter处理库将其转换为map对象。

如果您能够将您的URL调整为以下形式： http://localhost:3000/onboarding/5e9a173f9166f800128c04d1/5e9a173f9166f800128c04dc/5e9a173f9166f800128c04da

那么路由path='/onboarding/:eventId/:groupId/:userId'就可以匹配由useParams返回的路径参数。

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

- Drew Reese