Get multiple URL parameters using useParams() hook

Question

I am trying to pass multiple parameters in a url using React-Router 5.1 and the useParams hook in a Functional component.

However I encounter really strange behavior.

I paste the url into the client.

Url:

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

Path:

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

Strange thing #1: I have to make the params optional, or the browser just hangs forever.

I fish them out using all these strategies:

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

Strange thing #2: Unfortunately when trying to use these params this happens:

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

The hook just takes the first param and interprets the rest a part of te first.

Strange thing #3: Since adding this url params query accessing the page laoding is extremely slow, multiple seconds.

What am I not seeing, doing wrong?

ANSWER:

What I was doing wrong: I was using url/eventId=123. This is wrong. You just need to supply the resource at the right place in the URL url/1/2/3.

correct:

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

You then tell the Router that those things will be called eventId & groupId & userId.

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

Then you can access these in the component using the userPrams() hook.

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

Thanks everyone!

You're mixing up "params" and "search". if the url is `/onboarding/1/2/3/` then the result of `useParams` will be `{ eventId: 1, groupId: 2 userId: 3 }` — azium, Apr 18 '20 at 07:24
Thank you for your answer, I still do not understand. var params = useParams(); var userId = params.userId // should work But params is undefined — Arne Oldenhave, Apr 18 '20 at 07:38

score 11 · Accepted Answer · answered Apr 18 '20 at 07:34

Your Route structure and Route doesn't match

If you want to use params in your URL would be http://localhost:3000/onboarding/5e9a173f9166f800128c04d1/5e9a173f9166f800128c04dc/5e9a173f9166f800128c04da

And your Route component would be:

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

And then you can use this in the OnboardingViewControllercomponent:

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

Drew Reese · Answer 2 · 2020-04-18T07:51:06.583

You are mixing up match parameters with URL query parameters.

The URL query parameters can be retrieved from the location object using the useLocation hook.

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

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

would need a route path="/onboarding/" though

You can use a QueryParameter processing library to then convert these to a map object.

If you could massage your URL to be in the form: http://localhost:3000/onboarding/5e9a173f9166f800128c04d1/5e9a173f9166f800128c04dc/5e9a173f9166f800128c04da

Then the route path='/onboarding/:eventId/:groupId/:userId' can then match the path params returned by useParams.

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

Get multiple URL parameters using useParams() hook

2 Answers2