How to set dynamic route with query params in react-router-dom

Question

I need to set a dynamic route with query params -> http://localhost:3000/reset-password/?id=2

<Route path="/reset-password/?id=:id" component={ResetPassword} />

But this isn't working and it's showing as page not found. Please help on this.

score 2 · Answer 1 · answered Oct 27 '20 at 15:00

No need for the ?id=:id, thats part of react-router
You probably need the exact keyword;

<Route exact path={"/reset-password/:id"} component={ResetPassword} />

Then, in the ResetPassword component, use the following prop to get the :id;

this.props.match.params.id

React : difference between <Route exact path="/" /> and <Route path="/" />

score 1 · Answer 2 · answered Oct 27 '20 at 14:59

1

Get rid of the query string.

<Route path="/reset-password/:id" component={ResetPassword} />

answered Oct 27 '20 at 14:59

aolivera

372
2
21

score 0 · Answer 3 · answered Oct 27 '20 at 16:40

Found a solution here for query strings, but i'd recommend using params and useParams() hook which don't need any setup and has the same usability as shown below

function useQuery() {
  return new URLSearchParams(useLocation().search);
}


const { id } = useQuery();

score 0 · Answer 4 · answered Apr 02 '22 at 09:31

0

answered Apr 02 '22 at 09:31

Darda

31
1
3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 02 '22 at 10:58

score -2 · Accepted Answer · answered Oct 27 '20 at 14:59

-2

<Route path="/reset-password/:id" component={ResetPassword} />

Url to visit: http://localhost:3000/reset-password/2

answered Oct 27 '20 at 14:59

TokaLazy

138
6

How to set dynamic route with query params in react-router-dom

5 Answers5