React JS : Uncaught TypeError: Cannot read properties of undefined (reading 'params')

Question

after i finished a cours about react i tried to create a git engine app using git api and i got this problem when i tried to catch the url param using "this.props.match.params.login" enter image description here

enter image description here

enter image description here

any help please !! thanks in advance

Answer 1

Use a functional component to get the params of a route path:

import { useParams } from 'react-router-dom';

const YourComponent = () => {
  const { yourParam } = useParams();
  console.log(yourParam);
  // the rest of your logic
}

Edit:

According to React Router, v6 fully embraced hooks and use them to share all the router's internal state. However, in class-based components you can use a wrapper to get the params of a route path.

In your App.js, add the following snippet:

import {
  useLocation,
  useNavigate,
  useParams
} from "react-router-dom";

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      <Component
        {...props}
        router={{ location, navigate, params }}
      />
    );
  }

  return ComponentWithRouterProp;
}

const InfoRoute = withRouter(Info);

Then, in your Routes (still in App.js) use the new component:

<Route path='/allUsers/:login' element={<InfoRoute />} />

Finally, in your info.js, you can get the login param from the path url as follows:

this.props.router.params.login