一次 react-router 中遇到的小坑

react-router Link 标签不生效的问题

废话不多说, 直接上问题, 排解过程和答案

• 现象: 发现 使用 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>
);
}

• 问题查找

1. react-router版本问题, 我使用的react-router版本没有去管, 发现是采用的 v4的版本
   
   新的版本中, 具体用法和API都有了更改. 需要去注意, 比如 HashRouter 等的加入.

经过排查, 并不是此处的问题.

1. 后仔细尝试, 和一些 starter 和 demo中的仔细比对 , 发现我的 Link 是卸载 Router下边的.
   
   尝试将Link卸载具体的 Router 对应的 component 中. 生效.
   
   在这个例子中,比如Home组件.

一个小坑, 但是踩上了就会浪费很多生命去拔出来.