Q:

Passing props to child using Route

There's a lot of questions and answers around what I'm asking, but I feel like I'm reading it and applying it correctly it just isn't working and I'm getting undefined on my props every time.
So I have my parent component here:
let meeting = {
  title: 'Some title',
};
Meteor.startup(() => {
  render((
    <Router>
      <div>
        <Nav />
        <Route exact path="/" component={Start} dataMeeting={meeting} />
        <Route path="/app" component={App} />
        <Modal />
      </div>
    </Router>
  ), document.getElementById('render-target'));
});

Then in my other file where my Start component is I do a console.log on this.props
export default class Start extends Component {
  render() {
    console.log(this.props.dataMeeting);
    return (
      <div className="home">
        <p>test</p>
      </div>
    );
  }
}

In my console.log I get back undefined, and when I just console.log the this.props I can't see my dataMeeting in the object.
Any idea why I'm misunderstanding?
Thanks!

A:

Looks like you are using react-router v4, you can pass props by using the render prop instead of component:
<Route path="/" render={()=><Start dataMeeting={meeting} />}/>

As @ToddChaffe pointed out, you could (but should not) use the component prop in the same manner:
<Route path="/" component={()=><Start dataMeeting={meeting} />}/>

however that will recreate the component on every render.

