Using "react-router-dom": "^5.2.0" and "react": "16.8.6",
I have this:
<Switch>
<Route path="/users" component={Users} />
<Route path="/users/:id" component={Users} />
</Switch>
and in the Users component:
const param = useParams();
console.log(param);
So if I enter /users or /users/10 always param renders as empty object. What am I missing here?
The Switch component will only render its first match.
The first Route that matches the path /users/10 is <Route path="/users" component={Users} />.
This means that even though you have a second Route that says the "10" should be a param called id, its ignoring it and treating it as the first Route does which has no params.
You can easily correct this behavior by using the exact prop on the first Route:
<Route exact path="/users" component={Users} />
This will instruct react-router to only match that route if the URL matches the path exactly, and will allow /users/10 to pass down to the Route you actually want it to match. Then you will have the params available that you expect.
I am not using Switch. In my case, by mistake I imported useParams from 'react-router' and not from 'react-router-dom'. After import
import { useParams } from 'react-router-dom';
I got good params.
import your useparams from react-router-dom instead of react-router Like this :
import {useParams } from "react-router-dom";
const {yourId} = useParams();
console.log(yourId);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>