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

我试图使用React Router 5.1和功能组件中的useParams钩子在url中传递多个参数

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

我将url粘贴到客户端

网址：

路径：

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

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

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

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

奇怪的事#3: 由于添加此url参数查询访问页面的速度非常慢，需要几秒钟

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

答复:

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

正确：

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

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

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

---

谢谢大家

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

如果您想在URL中使用参数，则

http://localhost:3000/onboarding/5e9a173f9166f800128c04d1/5e9a173f9166f800128c04dc/5e9a173f9166f800128c04da

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

您的路线组件将是：

然后您可以在

OnboardingViewController

组件中使用它：

var{eventId，groupId，userId}=useParams（）；
日志（eventId、groupId、userId）

您将匹配参数与URL查询参数混为一谈

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

给定URL

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

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

需要一条路线

path=“/onboarding/”

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

如果您可以将您的URL设置为以下格式：

然后路由

path='/onboarding/:eventId/:groupId/:userId'

就可以匹配

useParams

返回的路径参数

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

---

你把“参数”和“搜索”混在一起了。如果url是

/onboarding/1/2/3/

，那么

useParams

的结果将是

{eventId:1，groupId:2 userId:3}

谢谢你的回答，我仍然不明白。var params=useParams（）；var userId=params.userId//应该可以工作，但params未定义

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

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