proper way to get entity indicator id from end of route in react?

Question

I wrote some code to get an entity indicator id from the end of a route in a React component:

const pathname = this.props.location.pathname;
const lastPathPart = pathname.split('/').slice(-1)[0];
const requestedJobId = Number(lastPathPart);

The code above gets the requested job id from the end of the route as needed/expected but is there a more proper or structured way to do this in React?

what path are you passing to the `Route` ? How does this `pathname` look like . — Shyam, Jun 02 '21 at 13:58
my app uses classes (not hooks). the route looks like this: http://localhost:5001/MyApp/Home/Messages/4000000408 — iron.man.rball, Jun 02 '21 at 14:12

Rukshan Jayasekara · Answer 1 · 2021-06-02T14:23:06.623

1. If it's a functional component, You can use react-router's useParams hook.

Example:

Let's assume this is your route.

<Router>
   <Switch>
      <Route path="/:id" children={<User />} />
   </Switch>
</Router>

Now you can use the useParams hook to extract the id inside the User component like this.

import { useParams } from "react-router";

function User() {
  let { id } = useParams();
  return <h2>User {id}</h2>;
}

2. If it's a class component you can refer to this solution.

proper way to get entity indicator id from end of route in react?

1 Answers1