嗨,我已经安装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
。
未捕获的类型错误:无法读取未定义的属性“历史”
任何想法 !!!
假设您有一些名为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>
)
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句