Javascript react路由器v4错误链路组件

我有一个从

react路由器dom导入链接的组件

import React, { Component } from 'react';
import { Link } from 'react-router-dom';


class Sidebar extends Component{

  render() {
    return (
      <div className="be-left-sidebar">
        <div className="left-sidebar-wrapper"><a href="#" className="left-sidebar-toggle">Blank Page</a>
          <div className="left-sidebar-spacer">
            <div className="left-sidebar-scroll">
              <div className="left-sidebar-content">
                <ul className="sidebar-elements">
                  <li className="divider">Menu</li>
                  <li className="parent"><a href="#"><i className="icon mdi mdi-home" /><span>Home</span></a>
                    <ul className="sub-menu">
                      <li><Link to='/'>Home</Link>
                      </li>

                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div className="progress-widget">
            <div className="progress-data"><span className="progress-value">60%</span><span className="name">Current Project</span></div>
            <div className="progress">
              <div style={{width: '60%'}} className="progress-bar progress-bar-primary" />
            </div>
          </div>
        </div>
      </div>
    );
  }

};

export default Sidebar;

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
类边栏扩展组件{
render（）{
返回(

菜单


家




当前项目的60%
);
}
};
导出默认边栏；

然后console.log显示一个错误

• 警告：失败的上下文类型：上下文路由器在链接中标记为必需，但其值未定义。

• 无法读取未定义的属性“历史记录”

`

我是react新手，正在使用react路由器v4.1.1

有人能帮我吗？

---

感谢React router v4中的交换机、路由和链路组件，我们从React router dom导入这些组件，并按如下方式配置路由器：

import { Switch, Route, Link } from 'react-router-dom';

  <span>LINKS:</span>
  <ul>
    <li onClick={this.props.goToDefault}><Link to={'/'}>Go To Default</Link></li>
    <li onClick={this.props.goToSub1}><Link to={'/left-sub1'}>Go To One</Link></li>
    <li onClick={this.props.goToSub2}><Link to={'/left-sub2'}>Go To Two</Link></li>
  </ul>
  <Switch>
    <Route exact path='/' component={LeftSubDefault} />
    <Route path='/left-sub1' component={LeftSubOne} />
    <Route path='/left-sub2' component={LeftSubTwo} />
  </Switch>

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter>
    <App />
</BrowserRouter>

从'react router dom'导入{Switch，Route，Link}；
链接：

转到默认值
转到一
转到两个

在app.js或任何您的输入文件中。将应用程序组件包装在BrowserRouter中，如下所示：

import { Switch, Route, Link } from 'react-router-dom';

  <span>LINKS:</span>
  <ul>
    <li onClick={this.props.goToDefault}><Link to={'/'}>Go To Default</Link></li>
    <li onClick={this.props.goToSub1}><Link to={'/left-sub1'}>Go To One</Link></li>
    <li onClick={this.props.goToSub2}><Link to={'/left-sub2'}>Go To Two</Link></li>
  </ul>
  <Switch>
    <Route exact path='/' component={LeftSubDefault} />
    <Route path='/left-sub1' component={LeftSubOne} />
    <Route path='/left-sub2' component={LeftSubTwo} />
  </Switch>

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter>
    <App />
</BrowserRouter>

从'react router dom'导入{BrowserRouter}；
这是一篇很好的文章，可能会有所帮助。
请确保您的组件出现在
组件中
 我想你需要看看路由器。你确定你的组件出现在
组件中吗？您的react路由器dom的确切版本是什么？谢谢，我不知道react路由器dom组件必须由router@philippsh包装