Как передать получателя контекста в компонент (Event.js), отображаемый только React Router?

Question

Мое приложение использует React Router (Router.js), я пытаюсь реализовать CentralStore, используя Context API для передачи состояния компоненту Event.js, предоставленному Router.

Как передать получателя контекста в Component(Event.js) отображается только React Router?Прямо сейчас AppContext не определен в Event.js.

Живой код: https://codesandbox.io/s/0x83zz0jmw

const AppContext = React.createContext();

class CentralStore extends React.Component {
  state={
    events: false,
  }

  componentDidMount() {
    firebase
      .collection("events")
      .get()      
      .then( querySnapshot => {
        const events = [];
        querySnapshot.docs.forEach(doc => {
          events.push(doc.data());
        });
        this.setState({
          events: events
        });
      });
  }

  render(){
    return(
      <AppContext.Provider value={{
        state: this.state
      }}>
        {this.props.children}
      </AppContext.Provider>
    )
  }
}


import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import App from '../App';
import EventCreator from './EventCreator';
import NotFound from './NotFound';
import Event from './Event';
import Events from './Events';
import CentralStore from '../CentralStore';

const Router = () => (
  <CentralStore>
    <BrowserRouter>
    <Switch>
      <Route exact path="/" component={App}/>
      <Route path="/create-event" component={EventCreator} />
      <Route path="/events/:eventId" component={Event} />
      <Route path="/events" component={Events} />
      <Route component={NotFound}/>
    </Switch>
    </BrowserRouter>
  </CentralStore> 
);

export default Router;

//

const Event = (props) => {
  console.log(props);
  return (
      <div className="event">
         <AppContext.Consumer>
          {(context) => (
            console.log(context)
          )}
        </AppContext.Consumer> */}
      </div>
  );
}

export default Event;

Answer 1

Проблема была решена путем экспорта AppContext из компонента CentralStore

// The missing export

export const AppContext = React.createContext();

class CentralStore extends React.Component {
  state={
    events: false,
  }

  componentDidMount() {
    firebase
      .collection("events")
      .get()      
      .then( querySnapshot => {
        const events = [];
        querySnapshot.docs.forEach(doc => {
          events.push(doc.data());
        });
        this.setState({
          events: events
        });
      });
  }

  render(){
    return(
      <AppContext.Provider value={{
        state: this.state
      }}>
        {this.props.children}
      </AppContext.Provider>
    )
  }
}