History (React 16 七)

www.bootcdn.cn：https://cdn.bootcss.com/history/4.7.2/history.js
npm 官網連接
這是用來控制上一頁、下一頁的功能

※createBrowserHistory

<script src="./js/history_4.7.2.js"></script>
    
<script>
const history = History.createBrowserHistory();
    
function push(path) {
    history.push(path);
    return false;
}
    
function goBack() {
    history.goBack();
}
    
function goForword() {
    history.goForward();
}
    
function replace(path) {
    history.replace(path)
}
    
function go(n) {
    console.log(n);
    history.go(n);
}
    
history.listen(path => {
    console.log('path=', path);
})
</script>
    
<a onclick="return push('/reactPractice/historyPractice.htm#aaa')">超連結加入</a>
<button onClick="push('/reactPractice/historyPractice.htm#bbb')">按鈕加入</button>
<button onClick="goBack()">上一頁</button>
<button onClick="goForword()">下一頁</button>
<input type="number" onBlur="go(this.value)" />第?頁
<button onClick="replace('/reactPractice/historyPractice.htm#ccc')">取代</button>

※ aaa -> aaa -> aaa -> bbb -> bbb -> bbb，從左到右執行後，按上一頁、下一頁會有對應的效果

※push 就是從左到右一個一個排進去的

※假設按第五個 bbb 後，按取代鈕，那第五個會變成 ccc，然後上一頁、下一頁依此類推

※go 方法可以傳負數，就是上幾頁的意思，如果上一頁或下一頁沒有，就不執行

※createHashHistory

<script src="./js/history_4.7.2.js"></script>
    
const history = History.createHashHistory();
    
function push(path) {
    history.push(path);
    return false;
}
    
function goBack() {
    history.goBack();
}
    
function goForword() {
    history.goForward();
}
    
function replace(path) {
    history.replace(path)
}
    
function go(n) {
    console.log(n);
    history.go(n);
}
    
history.listen(path => {
    console.log('path=', path);
})
</script>
    
<a onclick="return push('/aaa')">超連結加入</a>
<button onClick="push('/bbb')">按鈕加入</button>
<button onClick="goBack()">上一頁</button>
<button onClick="goForword()">下一頁</button>
<input type="number" onBlur="go(this.value)" />第?頁
<button onClick="replace('/ccc')">取代</button>

※aaa -> aaa -> aaa -> bbb -> bbb -> bbb，使用 createHashHistory 後，必需將連續相同的看成一個，所以要看成 aaa -> bbb，所以按上一頁會直接變成 aaa

※又如果是 aaa -> aaa -> bbb -> bbb -> aaa -> bbb，那就看成 aaa -> bbb -> aaa -> bbb