const history = {
 length: globalHistory.length, 
 action: "POP", 
 location: initialLocation,
 createHref,
 push, // 改變location
 replace,
 go,
 goBack,
 goForward,
 block,
 listen //監聽路由變化
};

function push(){
 createKey(); // 創建location的key，用于唯一標示該location，是隨機生成的
 if(BrowserHistory){
 globalHistory.pushState({ key, state }, null, href);
 }else if(HashHistory){
 window.location.hash = path;
 }
 //上報listener 更新state ...
}
function replace(){
 createKey(); // 創建location的key，用于唯一標示該location，是隨機生成的
 if(BrowserHistory){
 globalHistory.replaceState({ key, state }, null, href); 
 }else if(HashHistory){
 window.location.replace(window.location.href.slice(0, hashIndex >= 0 ? hashIndex : 0) + "#" path);
 } 
 //上報listener 更新state ... 
}

if(BrowserHistory){
 window.addEventListener("popstate", routerChange);
}else if(HashHistory){
 window.addEventListener("hashchange", routerChange);
}
function routerChange(){
 const location = getDOMLocation(); //獲取location
 //路由切換
 transitionManager.confirmTransitionTo(location,callback=()=>{
 //上報listener
 transitionManager.notifyListeners();
 });
}

import { Component } from 'react';
import createHistory from 'history/createHashHistory';
const history = createHistory(); //創建 history 對象
/**
 * 配置路由表
 * @type {{"/": string}}
 */
const router = {
 '/': 'page/home/index',
 '/my': 'page/my/index'
}
export default class Router extends Component {
 state = { page: null }

 async route(location) {
 let pathname = location.pathname;
 let pagePath = router[pathname];
 // 加 ./的原因 https://webpack.docschina.org/api/module-methods#import-
 const Page = await import(`./${pagePath}`); //獲取路由對應的ui
 //設置ui
 this.setState({ 
 Page: Page.default 
 });
 }

 initListener(){
 //監聽路由切換
 history.listen((location, action) => {
 //切換路由后，更新ui
 this.route(location);
 });
 }

 componentDidMount() {
 this.route(history.location);
 this.initListener();
 }

 render() {
 const { Page } = this.state;
 return Page && <Page {...this.props} />;
 }
}