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

Question

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

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

我把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}

钩子只接受第一个参数并首先解释 te 的其余部分。

奇怪的事#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();

谢谢大家！

Answer 1

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

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

您的路线组件将是：

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

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

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

Answer 2

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

可以从 location object using the useLocation 挂钩中检索 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 成为以下形式： http://localhost:3000/onboarding/5e9a173f9166f800128c04d1/5e9a173f9166f800128c04dc/5e9a173f9166f800128c04da

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

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

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

Get multiple URL parameters using useParams() hook

url-parameters

reactjs

react-router

react-hooks

react-functional-component