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.

Answer 1

1. No need for the ?id=:id, thats part of react-router
2. 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="/" />

Answer 2

Get rid of the query string.

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

Answer 3

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();

Answer 4

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

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