一、history 是什麼？

大家都知道瀏覽器都支援 Window Object Properties 的語法，你可以使用 window.open("https://ithelp.ithome.com.tw/", "_blank"); 在新分頁打開指定的 url；可以使用 window.document.getElementById(root) 抓到你想要的元素；或者可以呼叫 window.screen.width 獲得現在瀏覽器的實際寬度，但你一直 window 來 window 去，有想過 window 的感受嗎(咦)

如果你很厭倦一直重複呼叫 window 大大，那你可以認識一下 history 這個酷東西。這邊直接附上官方 gitHub 連結，如果要用一句話來介紹它的話，我會形容「它是建立在瀏覽器 API 的基礎上，方便輕鬆呼叫瀏覽器導航動作等的工具函數」。

二、在 React 裡正確地使用 history

在前一篇文章中，我們知道 react-router 裡有分為 browserHistory 和 hashHistory，在 history 裡也是。

1. browserHistory 的對應引用方式

import { createBrowserHistory } from "history";
let history = createBrowserHistory();

2. hashHistory 的對應引用方式

import { createHashHistory } from 'history';
export default createHashHistory({});

3. React Native 或一些測試環境的對應引用方式

import { createMemoryHistory } from "history";
let history = createMemoryHistory();

4. history 官方文件整理

三、實際範例

消化完文件，並且正確引用後，你可以試著在頁面中 console.log 你的 history，或者照著範例實際使用看看它的功能。

範例1：取得網址最後方的那串神秘數字(history.location.pathname.split)

let urlData = history.location.pathname.split('https://ithelp.ithome.com.tw/users/');

範例2：取得網址「?」後面的那些參數(history.location.search())

/*
 * 假設網址是 https://www.youtube.com/watch?v=nTeuhbP7wdE&t=24626s
 * urlQuery 將會得到字串 '?v=nTeuhbP7wdE&t=24626s'
*/
let urlQuery = history.location.search();

範例3：改變網址到指定網址或路徑(history.push)

onClick={
    () => history.push('https://ithelp.ithome.com.tw')
}

範例4：改變網址，讓網址有些我想要的參數(history.push)

/*
 * 假設網址原本是 https://ithelp.ithome.com.tw
 * 點擊按鈕後想要指定路由到 https://ithelp.ithome.com.tw/articles?id=12345
*/
onClick={
    () => history.push('https://ithelp.ithome.com.tw/articles' + '?id=' + '12345')
}

以上就列出最基本的 history 啦，大家有推薦其他超好用的方法，可以在底下留言唷！