history插件管理浏览记录

1. history插件的使用

   history这个插件可以方便管理你的浏览记录
   cnpm install history --save
   import createHistory from 'history/createBrowserHistory'

2. 三种方法

   有三种使用方式
       createBrowserHistory 现代浏览器使用
           createBrowserHistory({
               basename: '', // 基链接
               forceRefresh: false, // 是否强制刷新整个页面
               keyLength: 6, // location.key的长度
               getUserConfirmation: (message,callback) => callback(window.confirm(message)) // 跳转拦截函数
           })
       createMemoryHistory 手机端使用
           createMemoryHistory({
               initialEntries: ['/'], // 初始载入路径，和MemoryRouter中的initialEntries是一样的
               initialIndex: 0, // initialEntries初始载入索引
               keyLength: 6, // location.key的长度
               getUserConfirmation: null // 路由跳转拦截函数
           })
       createHashHistory 老版本浏览器使用，暂不介绍

3. 基本使用功能

   const history = createHistory(); 创建历史对象
   const location = history.location; 获取location对象
   const unlisten = history.listen( (location, action) => {
       console.log(location,action)
       // location是location对象
       // action是动作名称，比如 "PUSH"
   } )
   history.push('/a', { some: 'state' }) // 强制跳转
   unlisten() // 监听解绑

4. history对象

   属性：
       上面三种方法创建的history对象都有如下三个属性
           history.length 历史记录的条数
           history.location 历史记录中的location对象
           history.action 当前的历史记录是通过什么动作添加进来的，如 "PUSH"
       createMemoryHistory中提供了额外的两个属性
           history.index 当前历史记录的索引
           history.entries 历史记录
   方法
       listen方法
           history.listen( (location,action) => {
               console.log(location,action);
               // location就是window.location的一个子集
               // action可能的值，"PUSH", "REPLACE", "POP"
           } )

5. 使用history实现跳转

   push    
       使用push可以将一条新的历史记录推送到历史堆栈中
       history.push('/a');
       history.push('/a',{name: 'yejiawei'});
       history.push({
           pathname: '/a',
           state: {
               name: 'yejiawei'
           }
       });
   replace方法和push方法使用形式一样，replace的作用是取代当前历史记录
   go，此方法用来前进或者倒退，history.go(-1);
   goBack，此方法用来回退，history.goBack();
   goForward，此方法用来前进，history.goForward();
   另外使用createMemoryHistory创建的history对象，有canGo方法，和go方法类似

6. 使用history实现路由跳转警告

   const unblock = history.block('Do you want to leave?');
   上面这个用法，就是添加一个跳转提示信息，默认使用dom环境的window.confirm，所以如果使用非dom环境的createMemoryHistory就要使用getUserConfirmation方法实现
   另外，除了传递一个字符串提示信息以外，还可以添加函数
   const unblock = history.block( (location,action) => {
       return 'do you leave?'
   } )
   可以通过直接调用，unblock(); 实现方法解绑

**

后续

**
react-router 3结合webpack 实现两种类型的路由配置（1.项目部署在根目录，2.项目部署在2级或N级目录）;

首先用webpack配置区分根目录

new webpack.DefinePlugin({//根目录配置
            BASENAME: JSON.stringify('/')
})
new webpack.DefinePlugin({//二级目录配置
    BASENAME: JSON.stringify('/app')
})

然后使用useRouterHistory包装createHistory

let baseHistory;
if(BASENAME !== '/') {
      baseHistory = useRouterHistory(createHistory)({
          basename: BASENAME,
      });
  }else{
      baseHistory = useRouterHistory(createHistory)({
      });
  }
  window.wapHistoryType = baseHistory;
  const history = syncHistoryWithStore(baseHistory, store);
   render(
            <CusRouter store={store} history={history}></CusRouter>,
            document.getElementById('root')
    );

如果设置有basename，实际上会在所有Link(a)标签的herf属性加上basename;

<Link to="/index"></Link>
编译后： <a href="/app/index"></a>

此时如果要用编程时导航就不能直接引用browserHistory然后用他的push了；
需要用包装后返回的

window.wapHistoryType.push('/login')
//这里经过管道函数最后跳转地址为/app/login;