Passing props to the Component with react-router v4

Question

I am trying to pass some data from NodeJS server using react-router to my react view component.

Here is my server.jsx

ReactDOM.render((
<BrowserRouter>
    <Switch>
      <Route exact path='/' component={ HomeContainer } hello="foo"  />
      <Route path="/about" component={ AboutContainer } />
    </Switch>
</BrowserRouter>), document.getElementById('root'));

ReactDOM.childContextTypes = { hello: PropTypes.string };

Here is my HomeContainer.jsx

export default class HomeContainer extends Component {
  constructor(props, context) {
    super(props, context)
    console.log("Template context", this.context);
  }
render() {
    return (
        <div>
            <Helmet title="HomePage"/>
            <Menu />
            <HomePresenter hello={this.props.hello}/>
        </div>
    );
  }
}
HomeContainer.contextTypes = {
  hello: PropTypes.string,
  hello: React.PropTypes.string.isRequired
};

I am not sure as to why console.log statement in HomeContainer constructor is 'undefined'. What am I missing here?

Using Context is not really recommended in react according to the docs, what you want is basically for HomeContainer to be aware of the hello prop, you could see this answer on how to pass props to react-router component https://stackoverflow.com/questions/44255415/passing-custom-props-to-router-component-in-react-router-v4/44255850#44255850 — Shubham Khatri, Nov 21 '17 at 06:55
@ShubhamKhatri Thank you so much, after banging my head for such a long time, it turned out to be way simpler. this works smooth now. For some reasons, I was trying the same syntax last night, but was getting no results.. Maybe, I was sleep coding.. Haha! — Mona, Nov 21 '17 at 15:13

Passing props to the Component with react-router v4

0 Answers0