CODEWITHSUNDEEP
javascriptreactjsreact-router
Varun Rathore
Varun Rathore

Reputation: 7898

Unable to access Query String parameters inside a React Component

Here's what I have done so far,

This is the Route that I have defined for a page

<Route path='emails/user/view/:id' component={AccountEmails} />

And here's where the Component is being rendered

const AccountEmails = ({params: {id}}) => <ReceiptsListBox url={"/api/accounts/"+id+"/receipts.json"}></ReceiptsListBox>

Now, within the render() method of the component, I tried to console.log(this.props.location.query) unfortunately this.props.location is undefined.

Here's the YouTube video that I have referred to.

react-router version 2.8.1 and react version 15.3.2

Upvotes: 1

Views: 87

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104379

Use this:

const AccountEmails = props => {
    const {id} = props.params;
    return  <ReceiptsListBox 
                url={"/api/accounts/"+id+"/receipts.json"} 

                {...props}       // =====> notice this part, important

            </ReceiptsListBox>
}

Reason is: You are passing only url in props, not all the props values that AccountEmails receives from Routes, because of that location is not available inside ReceiptsListBox component.

Solution is pass all the props that AccountEmails component receive along with one extra url value, by that way location will be available inside ReceiptsListBox component.

Upvotes: 1

Related Questions