CODEWITHSUNDEEP
reactjsreact-router
Src
Src

Reputation: 5482

React docs context example

React docs has the following example (https://reactjs.org/docs/context.html#parent-child-coupling):

Context can also let you build an API where parents and children communicate. For example, one library that works this way is React Router V4:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </Router>
);

But where is the actual example? Which piece of this code shows the example of using context?

Upvotes: 0

Views: 81

Answers (1)

Ursus
Ursus

Reputation: 30056

It's the Router component. You can see the code here. In particular

getChildContext() {
  return {
    router: {
      ...this.context.router,
      history: this.props.history,
      route: {
        location: this.props.history.location,
        match: this.state.match
      }
    }
  };
}

And the render method where children are passed down the tree

render() {
  const { children } = this.props;
  return children ? React.Children.only(children) : null;
}

Upvotes: 1

Related Questions