Render Props - React Route

Question

const Home = () => <div>Home</div>

const App = () => {
  const someVariable = true;

  return (
    <Switch>
      {/* these are good */}
      <Route exact path='/' component={Home} />
      <Route
        path='/about'
        render={(props) => <About {...props}  />}
      />
    </Switch>
  )
}

const About = (props) => {
  return (
    <div>
      About   
    </div>
  )
} 

In the code sample , at

<Route
        path='/about'
        render={(props) => <About {...props}  />}
      />

when react encounters the render prop of the Route component which is part of react-router, what does it pass a props?

Given the documentation at https://reactjs.org/docs/render-props.html , a render prop is a function prop that a component uses to know what to render, is the value passed a props buried inside the declaration of Route in react-router

Answer 1

We use Route with render props as,

<Route path = "/about" component={About} />

OR,

<Route path = "/about" render= { (props) => <About {...props} } />

The second one is different from the first one in the sense that in the second case, the About component has access to the props coming through the Route.

Say, for instance, there is a Profile component,

<Route path="/admin/profile"
       render={ props => (
              <Profile tabs= {"valuePassed"} {...props}  />  
        )}
 />

Now in Profile component, we can access all the props,

this.props.tabs give "valuePasses" in class-based component while props.tabs is used for functional component.

Hope this helps.

Answer 2

The props are passed to the render prop method by the Route component. You can see this in the React Router source code. The props passed by the Route component have match, location, history, staticContext. If you want to use props from the parent component, where you are defining the render props method then you can omit the props argument.

render={() => <About {...props} />}

Then you would get the props from the component that contains the Route.

The example you have provided doesn't make much sense since that replicates the behaviour that you get by just using the 'component' prop on the Route.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js#L120

Answer 3

You get react router default props while passing props in render method just like if use component instead of using render props which implicitly get all these props match, location, history and staticContext. and you need to provide props as an argument otherwise it render method won't pass props down to the children because it will consider it undefined.

Here is working example for render props in react router: https://codesandbox.io/s/72k8xz669j