Accessing URL param in react-router render function

Question

this is a quick question but I haven't found a solution so far:

I want to access the URL parameter with react-router v4 using the render method. Everything I found so far was only passing the component like this:

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

But I want to use the render method like this:

<Route path="/:id" render={() => (<Wrapper> <Child /> </Wrapper>)} />

However, the match prop is undefined when I try to access the id parameter with props.match.params.id in my Child component.

Any idea how I could use a render function and still access the url parameter?

Does this answer your question? React - How to get parameter value from query string — Michael Freidgeim
– Michael Freidgeim, Commented Feb 18, 2020 at 21:23

Tomasz Mularczyk · Accepted Answer · 2018-06-14 10:30:03Z

13

You need to pass down props from Route to Child:

<Route path="/:id" render={(props) => (<Wrapper> <Child {...props} /> </Wrapper>)} />

or :

<Route path="/:id" render={(props) => (<Wrapper> <Child id={props.match.params.id} /> </Wrapper>)} />

answered Jun 14, 2018 at 10:30

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

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

1 Comment

Felix Over a year ago

Thanks, this worked. I actually tried that before but it didn't work because of a custom PrivateRoute component that I built myself and where I didn't pass the props to the render function.

Albert Gao · Accepted Answer · 2018-06-14 10:31:06Z

1

You can use location.search to get that query string in the URL, and get the path from location.pathname

<Route
      path="/about"
      render={({ location, history }) => (
           <div>
                 <p>We are at: {location.pathname}</p>
                 <p>Query string is: {location.search}</p>
           </div>
      )}
/>

answered Jun 14, 2018 at 10:31

Albert Gao

3,8298 gold badges48 silver badges74 bronze badges

Collectives™ on Stack Overflow

Accessing URL param in react-router render function

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related