Javascript 在react路由器旁边使用react api上下文

我在将上下文传递到路由时遇到问题。当我单击指向我的组件的链接时，我得到一个错误，其中上下文是从应用程序组件传递的。下面是应用程序的组件（只有一个导入仅用于显示上下文的来源）：

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;

这里一切都很好，直到我想制作一个链接到这个组件的菜单

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>
    );
  }
}

从“React”导入React；
从“反应汉堡菜单”导入{slide as Slider}；
从“react Router dom”导入{BrowserRouter as Router，Route，Link，Switch}；
从“/Main”导入Main；
从“/Userlist”导入用户列表；
导出默认类菜单扩展了React.Component{
渲染（）{
返回(
家
关于
);
}
}

---

当我点击一个指向组件用户列表的链接时，我得到一个没有定义加密列表的错误。我知道Userlist在点击链接后看不到上下文。如何正确传递？

您正在使用

菜单中的路由。这真的是你想要的吗？不过，我不知道这个幻灯片是怎么工作的。也许这就是你想走的路。我认为出现问题的原因是，
菜单
组件没有被提供者包装。试着这样做：

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


您的
菜单
组件将调用
用户列表
，但由于它不在提供程序中，上下文不存在！
在
上下文中替换
用户列表
。通过
菜单
提供程序
，一切都会好起来。
它看起来像在工作。我想还有更多的编码要做。谢谢，不客气。如果你考虑在这里接受一个答案，这个问题就会被关闭。
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>
    );
  }
}

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