Использование контекста реагирования API вместе с маршрутизатором реакции

Question

У меня проблема с передачей контекста к маршруту.Я получаю сообщение об ошибке при нажатии на ссылку, которая ведет к моему компоненту, где контекст был передан из компонента приложения.Ниже приведен этот компонент с приложением (только один импорт, чтобы показать, откуда исходит Контекст):

App.js

import { Context } from './Context';
class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
       cryptolist: []
    }
  }

  componentDidMount = () => {
    fetch('https://api.coinmarketcap.com/v2/ticker/?structure=array')
      .then(response => response.json())
      .then(json => this.setState({
        cryptolist: json.data
      }))
  }

  render() {
    return (
      <div>
        <Menu />
        <Context.Provider value={this.state}>
          <Userlist />
        </Context.Provider>
      </div>
    )
  }
}

export default App;

Userlist.js (должен быть cryptolist или что-то)

import { Context } from '.././Context'



export default class Userlist extends Component {
  render() {
    return (
      <main>
        <Context.Consumer>
          {(context) => context.cryptolist.map(el => {
              return (
                  <div>
                      <h2>{el.name}</h2>
                      <h5>{el.symbol}</h5>
                      <h3>{el.quotes.USD.price}</h3>
                  </div>
              )
          })}
        </Context.Consumer>
      </main>
    )
  }
}

Context.js

import React from 'react';

export const Context = React.createContext();

Здесь все работает отлично, пока я не хотел создать меню, связанное с этим компонентом.

import React from "react";
import { slide as Slider } from 'react-burger-menu';
import { BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import Main from './main';
import Userlist from './userlist';



export default class Menu extends React.Component {
  render () {
    return (
        <Router>
        <div className="bg-navy w-100 h-100">
          <Slider width={ 180 } isOpen={ false }>
            <Link className="menu-item" to="/main">Home</Link>
            <Link className="menu-item" to="/crypto">About</Link>
          </Slider>
             <Switch>
                <Route path="/main" component={Main} />
                <Route path="/crypto" component={Userlist} />
             </Switch>
          </div>
      </Router>
    );
  }
}

Когда я нажимаюссылка на компонент Userlist Я получаю сообщение об ошибке, которое не определено.Я понял, что список пользователей не видит контекст после нажатия на ссылку.Как правильно пройти?

Answer 1

Ваш Menu компонент будет вызывать Userlist, но как только он получен, поставщик не существует!Замените Userlist в Context.Provider на Menu, и все будет хорошо.

Answer 2

Вы используете маршруты в компоненте Menu.Вы действительно этого хотите?Хотя я не знаю, как работает этот слайд.Может быть, это путь, которым вы хотите идти.Я думаю, что ваша проблема возникает из-за того, что ваш Menu компонент не упакован провайдером.Попробуйте вот так:

<Context.Provider value={this.state}>
    <Menu />
    <Userlist />
</Context.Provider