未捕获的类型错误：无法读取未定义的属性“历史”！反应路由器答案

【问题标题】：Uncaught TypeError: Cannot read property 'history' of undefined !! React router未捕获的类型错误：无法读取未定义的属性“历史”！反应路由器
【发布时间】：2017-07-06 06:42:04
【问题描述】：

您好，我已经安装了react-router-dom，我想从中使用<Link>。下面是我的代码

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

    class UserList extends Component {

     renderList() {
        return this.props.users.map((user) => {
        return (
            <li
                key={user.id}
                onClick={() => this.props.selectUser(user)}
            >
                {user.first} {user.last}
            </li>
        );
    });
   }

   render() {
     return (
      <div>
        <Link to="/admin/"> Click Me </Link>
        <ul>
            {this.renderList()}
        </ul>
      </div>
    );
  }
}

   function mapStateToProps(state) {
     return {
       users: state.users
     };
   }

  function matchDispatchToProps(dispatch){
    return bindActionCreators({selectUser: selectUser}, dispatch);
   }


  export default connect(mapStateToProps, matchDispatchToProps)(UserList);

但是得到这个错误

警告：上下文类型失败：上下文router 在Link 中标记为必需，但其值为undefined。

未捕获的类型错误：无法读取未定义的属性“历史”

任何想法！！！

【问题讨论】：

您不能在上下文中使用 Link 而不提供 router。所以你需要用BrowserRouter 包裹你的根元素

标签： reactjs react-router

【解决方案1】：

假设您有一些名为App 的根组件。您需要将其根节点设置为一个路由器（例如 BrowserRouter），它将对 url 更改做出反应并通过上下文为 Link 提供正确的路由器实现。

// app.js
import { BrowserRouter, Route, } from 'react-router-dom'
import UserList from './path/to/UserListComponent'

class App extends Component {
  ...

  render() {
    return (
      <BrowserRouter>
        ...
        <Route path="/users" component={UserList}/>
        ...
      </BrowserRouter>
    )
  }
}

【讨论】：