$ npm i react-keeper --save
import { HashRouter,Route,Link } from 'react-keeper'
配置路由
注意:在使用react-keeper时,通过react-keeper引用的组件(Route,Link)都必须在HashRouter包裹之中,
并且HashRouter最外层还需要一个div
<div>
{/*路由容器 */}
<HashRouter>
<div>
<Route cache path="/" exact component = {Index} />
<Route path="/say" component = {Say} />
<Route path="/picture" component = {Picture} />
<Route path="/me" component = {Me} />
<Route path="/bookInfo" component = {bookInfo} />
{/* // 菜单栏 */}
<div className="menu">
<ul>
<li><Link to="/">文章</Link></li>
<li><Link to="/say">心情</Link></li>
<li><Link to="/picture">照片墙</Link></li>
<li><Link to="/me">关于我</Link></li>
</ul>
</div>
</div>
</HashRouter>
</div>
cache属性可以添加属性值,React-Keeper支持的属性值有root(default)、parent。
cache='root'(或cache)为永久缓存,只要根组件不解绑,页面将永久缓存。
cache='parent'为父组件缓存,在父组件不解绑的情况下会维持缓存状态。
引入Control
import { Control } from 'react-keeper'
回到上一页
Control.go(-1)
也通过这样跳转,并传递参数
Control.go("bookInfo",{ID:ID})
接收参数
Control.state.ID
传统方式:
this.props.history.push({
pathname:"bookInfo",
query:{ID:ID}
})
传统接手参数
this.props.location.query.ID
相关参考文章:
https://segmentfault.com/a/1190000016621746?utm_source=tag-newest