管理react路由的history對象的插件history的使用介紹


本文介紹如何使用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(); 實現方法解綁
    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM