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

Posted 2023-02-21

【中文标题】使用 useParams() 钩子获取多个 URL 参数

【英文标题】：Get multiple URL parameters using useParams() hook

【发布时间】：2020-07-31 18:28:41

【问题描述】：

我正在尝试使用 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

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

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

谢谢大家！

【问题讨论】：

您混淆了“参数”和“搜索”。如果 url 是 /onboarding/1/2/3/ 则 useParams 的结果将是 eventId: 1, groupId: 2 userId: 3

谢谢你的回答，我还是不明白。变量参数 = useParams(); var userId = params.userId // 应该可以但是 params 是未定义的

【参考方案1】：

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

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

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

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

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

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

如果您可以将您的网址修改为以下形式： http://localhost:3000/onboarding/5e9a173f9166f800128c04d1/5e9a173f9166f800128c04dc/5e9a173f9166f800128c04da

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

const  eventId, groupId, userId  = useParams();

【参考方案2】：

您的 Route 结构和 Route 不匹配

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

您的 Route 组件将是：

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

然后你可以在OnboardingViewControllercomponent 中使用它：

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