我正在尝试使用 React-Router 5.1 和功能组件中的 useParams Hook 在 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}
钩子(Hook)只接受第一个参数并首先解释其余部分。
奇怪的事情#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() 钩子(Hook)在组件中访问这些。
var { eventId, groupId, userId } = useParams();
谢谢大家!
最佳答案
您的 Route 结构和 Route 不匹配
如果你想在你的 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)
关于reactjs - 使用 useParams() 钩子(Hook)获取多个 URL 参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61285434/