Reactjs - `component` vs `render` in Route
When you pass a component to the component
prop, the component will get the path parameters in the props.match.params
object, i.e props.match.params.username
in your example:
class ProfileComponent extends React.Component { render() { return <div>{this.props.match.params.username}</div>; }}
When using the render
prop, the path parameters can be accessed through the props given to the render
function:
<Route exact path='/u/:username/' render={(props) => <ProfileComponent username={props.match.params.username}/> }/>
You generally use the render
prop when you need some data from the component that contains your routes, since the component
prop gives no real way of passing in additional props to the component.