React router with multiple params

Question

I have a page route /movies?categoryId=21213 on this page, I have a section of actors, on the click it's should redirect to /movies?categoryId=21213/actor?actorId=234324234

how should I describe correctly to render my latest component with an actor? I tried

<Route path=`/movies/:categoryId?/:actorId?`/>

but that's not working

My understanding is that query string parameters aren't directly handled by react-router, you could either use multiple paths: `` or handle your own query params using the location prop that the Route should make available on your component. — Jacob Smit, Jul 26 '20 at 22:39
Here is an older question that contains an answer on how to use query params with react router. [https://stackoverflow.com/questions/43216569/how-to-get-query-parameters-in-react-router-v4](https://stackoverflow.com/questions/43216569/how-to-get-query-parameters-in-react-router-v4) — Jacob Smit, Jul 26 '20 at 22:42

Mario Petrovic · Accepted Answer · 2020-07-27T09:02:37.670

There are two ways to approach this. Either go with query params or path params.

Path params

You route:

<Route path='/movies/:categoryId/:actorId' />

Here you will have route that has two path params /movies/1/2.

Query params Your route

<Route path='/movies' />

So your route is only /movies but you pass query params to it and handle them in your component.

Example of a route with query params /movies?categoryId=1&actorId=2.

You can use useHistory hook for that purpose in your routed component.

Personally i preferred to use query params because they are easier to handle in your component, but you can pick your way from these two examples.

In your question, code is a bit wrong, because path params dont need ? to be present in a route.

React router with multiple params

1 Answers1