Using the useParams hook in react

Question

I am learning useParams hook in react. I have a url like this and need to be able to extract the letter 9 from it.

    http://localhost:3010/9/solution

How can I go about this ?

Answer 1

I'm assuming you're using react router, if you define a route like this for example:

<Route path="/:id/about">
 <About />
</Route>

Notice that you define the path with this :id notation, that means that the id will be the param in this specific case. Then you create a Link component

<Link to="/2/about">About</Link>

And in your component that in this example is the about component you can use the hook like this:

function About() {
 const { id } = useParams();
 return (
  <div>
   <h2>Now showing post {id}</h2>
  </div>
 );
}

I have this code sandbox if you want to check the result https://codesandbox.io/s/react-router-basic-nv8pn