The React-router separates the new History class build method into a Node package named History. Common apis include createBrowserHistory, createHashHistory, and createMemoryHistory.

createBrowserHistory

CreateBrowserHistory is based on window.history. ** window.history ** is a read-only property that gets a reference to the History object, which provides an interface for manipulating the browser session history (pages visited in the browser address bar, and pages loaded through the frame in the current page).

Function createBrowserHistory(props = {}) {// Get a reference to the History object const globalHistory = window.history; / / supportsHistory through the window. The navigator. UserAgent judge whether to support the history const canUseHistory = supportsHistory (); / / supportsPopStateOnHashChange through the window. The navigator. UserAgent figure out whether the kernel Trident, IE10 and IE11 do not support popState const needsHashChangeListener =! supportsPopStateOnHashChange(); }Copy the code

The transitionManager used is created by calling createTransitionManager. It returns an integration object containing a listener function for the history address or object change, as follows:

function createTransitionManager() { let prompt = null; function setPrompt(nextPrompt) { warning(prompt == null, 'A history supports only one prompt at a time'); prompt = nextPrompt; return () => { if (prompt === nextPrompt) prompt = null; }; } function confirmTransitionTo( location, action, getUserConfirmation, callback ) { // TODO: If another transition starts while we're still confirming // the previous one, we may end up in a weird state. Figure out the // best way to handle this. if (prompt ! = null) { const result = typeof prompt === 'function' ? prompt(location, action) : prompt; if (typeof result === 'string') { if (typeof getUserConfirmation === 'function') { getUserConfirmation(result, callback); } else { warning( false, 'A history needs a getUserConfirmation function in order to use a prompt message' ); callback(true); } } else { // Return false from a transition hook to cancel the transition. callback(result ! == false); } } else { callback(true); } } let listeners = []; function appendListener(fn) { let isActive = true; function listener(... args) { if (isActive) fn(... args); } listeners.push(listener); return () => { isActive = false; listeners = listeners.filter(item => item ! == listener); }; } function notifyListeners(... args) { listeners.forEach(listener => listener(... args)); } return { setPrompt, confirmTransitionTo, appendListener, notifyListeners }; }Copy the code