React Router и Context не работают вместе

Question

Я пытаюсь передать данные с моих сайтов.

Я решил использовать для этого контекст React и реализовать контекст верхнего уровня (называемый DataContext).Однако панель управления, которую я использую, также реализует маршрутизатор React.

Как заставить оба работать вместе?

Пусть DataStore будет ContextProvider:

  import { Router, Route, Switch } from "react-router-dom";
  import DataStore from "./context/DataStore";
  const hist = createBrowserHistory();

  ReactDOM.render(
    <DataStore>
      <Router history={hist}>
        <Switch>
          {indexRoutes.map((prop, key) => {
            return <Route path={prop.path} component={prop.component} key={key} />;
          })}
        </Switch>
      </Router>
    </Datastore>,
    document.getElementById("root")
  );

Выше код не делаетработает на данный момент, и я не знаю, почему.

TypeError: render не является функцией

DataStore.jsx:

  import React from "react";

  export const DataContext = React.createContext();

  class DataStore extends React.Component {
    state = {
      data: {}
    };

    render() {
      return (
        <DataContext.Provider value={this.state.data}>
          {this.props.children}
        </DataContext.Provider>
      );
    }
  }

  export default DataStore;
  ~                                

Я получаю доступ к провайдеру следующим образом:

import {DataContext} from "../../context/DataStore";

class Accessor extends Component {

  render() {
    <DataContext.Consumer>
      <Item>
    </DataContext.Consumer>
  }
}

Answer 1

Используется Reaction-redux , который работал в том же сценарии и конфигурации.