React-Router params are not accessible

Question

I am trying to receive the 'id' that is in the URI. But I am unable to collect it.

Route:

 <Route path="/reports/:id" >
       {!isLoggedIn ?
          <Redirect to="/login" /> : <UserReport userData={userData} />
       }
 </Route>

Link:

<Link to={'/reports/'+employee.id}>
    <span className="btn btn-sm btn-primary" style={{cursor:'pointer'}}>
          Report <FontAwesomeIcon icon="history" />
    </span>
</Link>

Component:

const UserReport = (props)=>{

    return (
        <div>
            {props.match.params.id}
        </div>
    );
}

Error:

It says props.match is undefined

But when I try the component attribute in Route, it works

 <Route path="/reports/:id" component={UserReport} >

Is it possible to do this the way I am trying? Please help..This is my first React project.

Check this, maybe this component can solve your problem reactrouter.com/web/api/withRouter — Chaka15
– Chaka15, Commented Mar 9, 2021 at 9:16
@Chaka15 thank you for the suggestion, but Mohiuddin's answer saved my day! — user8232211
– user8232211, Commented Mar 9, 2021 at 9:22

Mohiuddin Khan · Accepted Answer · 2021-03-09 09:19:19Z

1

you can use useParams method from react-router-dom

import { useParams } from "react-router-dom";
const UserReport = () => {
    const { id } = useParams();
    return (
        <div>
            {id}
        </div>
    );
}

answered Mar 9, 2021 at 9:19

Mohiuddin Khan

5331 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-Router params are not accessible

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related