In React How to pass Id to another page class component

user_16023831 0
Viewed 779

I need to pass the Id to another Page using Class components. this.props.match.params.group_Id it returns undefined.Here is my code

#page1
<Link to={"/GroupsDetail.js/?group_Id="+item.group_Id}}>Details</Link>

 #page2

submit() {
        let Id= this.props.match.params.group_Id;
        console.log(Id);
        let url = 'http://localhost:0000/api/Group/GroupDetailsDisplay?group_Id='+Id;
}

Need to pass that Id into API.Please share your Idea. Thank you

react-router-dom reactjs
2 Answers
const url = new URL(window.location.href);
const Id = url.searchParams.get("group_Id");
user_86873180

react-router-dom only handles the path parts of the URL, it doesn't do anything with queryString parameter other than include them in the location object.

Locations represent where the app is now, where you want it to go, or even where it was. It looks like this:

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

Access the location prop and pass the search property to a new URLSearchParams to parse the queryString.

submit() {
  const { location } = this.props;
  const query = new URLSearchParams(location.search);

  const Id = query.get('group_Id');;
  console.log(Id);
  let url = 'http://localhost:0000/api/Group/GroupDetailsDisplay?group_Id='+Id;
}

If you wanted to keep the group id on the route's match params then you'll need to define the route path like path="/GroupsDetail.js/:Id", and link to it as <Link to={`/GroupsDetail.js/${item.group_Id}`}>Details</Link>.

user_86908570
Related