react的跳转保存记录浏览时的位置

1、下载相关依赖项

npm install react-keeper -s

2、app.js中相关配置

原来我们app.js中设置路由

import { Component } from 'react';
import { Link } from 'react-router-dom'
import { renderRoutes } from 'react-router-config';
import routes from './Routers/router'
 
render() {
    return (
      <div className="App">
        <div className="rouer-head">
          <Link to="/">首页</Link>
          <Link to="/about">关于我们</Link>
        </div>
        <div className="router-con">
         {renderRoutes(routes)}
        </div>
      </div>
    )
  };

现在更改为

import React from 'react'
// import Hello from './components/holle/holle.js'
// import {Link} from 'react-router-dom'
// import {renderRoutes} from 'react-router-config'
// import routes from './routes/index'

import { Route, HashRouter } from 'react-keeper';//这里引入react-keeper中要使用的组件
import { connect } from 'react-redux';
import Lindex from './views/Index/Index'
import History from './views/History/history'
import Linkage from './views/Linkage/linkage'
import Jump from './views/Jump/jump.jsx'


// const {Componet} = React

class App extends React.Component{
    
    render(){
        return(
            <div>
              
    
        <HashRouter>
          <div>
            <Route cache  path="/" component={()=><Lindex/>} />这个是列表页，也就是要缓存的组件
            <Route path="/history" component={()=><History/>}></Route>
            <Route path="/linkage" component={()=><Linkage/>}></Route>
            <Route path="/jump" component={()=><Jump/>}></Route>
          </div>
        </HashRouter>


               
            </div>
            
        )
    }
}
export default connect((props,state)=>Object.assign({},props,state),{})(App)

3、列表页面相关配置

导入需要使用的依赖

import { Control ,CacheLink} from 'react-keeper'

 使用导入的 CacheLink  包裹我们要点击跳转的模块，CacheLink  具体作用就是可以缓存跳转之前的组件，具体使用场景这里不多做解释了，大家可以查看文章开始的参考网址。

里面的to是详情页

  4、关于点击事件跳转页面

Control.go(`/jump`);

 

 

 5、详情页面点击返回按钮

当然也需要先引入

import { Control ,CacheLink} from 'react-keeper'