ReactJS – Can't obtain parameters from url using Route. How can I pass params through url with Route?

0

Issue

I’m trying to pass user_id through url as follows. The link http://localhost:3000/activate/1 works now but I have no idea where to find the params? If I recall correctly I should be able to access them from "props.match" but this doesn’t exist. I can’t find the params in props.

Can anyone point me in the right direction what I did wrong?

I’m using React 17.0.2

<Routes>
  <Route
    path={"/activate/:user_id"}
    element={
      <Activate />
    }
  />
</Routes>

Activate.js

export default function Activate(props) {

  useEffect(() => {
    console.log("props", props);
    console.log("props", props.match); // undefined
    activate();
  }, []);

  return <div>hi</div>;
}

Solution

There is a hook "useParams" in react-router-dom.

  let { id } = useParams();

where "id" is your param (users/:id)
You can read about that here: https://v5.reactrouter.com/web/api/Hooks/useparams

Answered By – Ivan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More