CODEWITHSUNDEEP
reactjsreact-router-dom
Vijayaasri
Vijayaasri

Reputation: 35

In React How to pass Id to another page class component

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

Upvotes: 2

Views: 1217

Answers (2)

Drew Reese
Drew Reese

Reputation: 202846

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>.

Upvotes: 1

Mohaimin
Mohaimin

Reputation: 702

const url = new URL(window.location.href);
const Id = url.searchParams.get("group_Id");

Upvotes: 1

Related Questions