Unable to access Query String parameters inside a React Component

Question

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

Mayank Shukla · Accepted Answer · 2018-02-06 07:07:18Z

1

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.

answered Feb 6, 2018 at 7:07

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

Collectives™ on Stack Overflow

Unable to access Query String parameters inside a React Component

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