Question

未捕获的类型错误：无法读取未定义的属性“history”!! React 路由器

2017-07-06

7477

reactjs react-router

嗨，我已经安装了 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 。

未捕获的 TypeError：无法读取未定义的属性“history”

有什么想法！！！

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