Question

您好我已安装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：无法读取未定义的属性“历史记录”

任何想法!!!

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

未捕获的TypeError：无法读取未定义的属性“历史记录”!!反应路由器

1 个答案: