react-router Link 标签不生效的问题
废话不多说, 直接上问题, 排解过程和答案
render() {
return (
<div>
<Router history={hashHistory}>
<Route path="/" component={Home}/>
<Route path="/page1" component={Page1}/>
<Route path="/error" component={ErrorPage}/>
</Router>
<Link to=“/page1" />
<Link to=“/error" />
</div>
);
}
- 问题查找
- react-router版本问题, 我使用的react-router版本没有去管, 发现是采用的 v4的版本
新的版本中, 具体用法和API都有了更改. 需要去注意, 比如 HashRouter 等的加入.
经过排查, 并不是此处的问题.
- 后仔细尝试, 和一些 starter 和 demo中的仔细比对 , 发现我的 Link 是卸载 Router下边的.
尝试将Link卸载具体的 Router 对应的 component 中. 生效.
在这个例子中,比如Home组件.
一个小坑, 但是踩上了就会浪费很多生命去拔出来.