git clone https://github.com/ReactTraining/history.git
“version”: “4.10.1”

/modules/index.js

  1. export { default as createBrowserHistory } from './createBrowserHistory';
  2. export { default as createHashHistory } from './createHashHistory';
  3. export { default as createMemoryHistory } from './createMemoryHistory';
  4. export { createLocation, locationsAreEqual } from './LocationUtils';
  5. export { parsePath, createPath } from './PathUtils';

createLocation

  1. import resolvePathname from 'resolve-pathname';
  2. import valueEqual from 'value-equal';
  4. // import { parsePath } from './PathUtils.js';
  5. function parsePath(path) {
  6.   let pathname = path || '/';
  7.   let search = '';
  8.   let hash = '';
  10.   const hashIndex = pathname.indexOf('#');
  11.   if (hashIndex !== -1) {
  12.     hash = pathname.substr(hashIndex);
  13.     pathname = pathname.substr(0, hashIndex);
  14.   }
  16.   const searchIndex = pathname.indexOf('?');
  17.   if (searchIndex !== -1) {
  18.     search = pathname.substr(searchIndex);
  19.     pathname = pathname.substr(0, searchIndex);
  20.   }
  22.   return {
  23.     pathname,
  24.     search: search === '?' ? '' : search,
  25.     hash: hash === '#' ? '' : hash
  26.   };
  27. }
  29. export function createLocation(path, state, key, currentLocation) {
  30.   let location;
  31.   if (typeof path === 'string') {
  32.     // Two-arg form: push(path, state)
  33.     location = parsePath(path);
  34.     location.state = state;
  35.   } else {
  36.     // One-arg form: push(location)
  37.     location = { ...path };
  39.     if (location.pathname === undefined) location.pathname = '';
  41.     if (location.search) {
  42.       if (location.search.charAt(0) !== '?')
  43.         location.search = '?' + location.search;
  44.     } else {
  45.       location.search = '';
  46.     }
  48.     if (location.hash) {
  49.       if (location.hash.charAt(0) !== '#') location.hash = '#' + location.hash;
  50.     } else {
  51.       location.hash = '';
  52.     }
  54.     if (state !== undefined && location.state === undefined)
  55.       location.state = state;
  56.   }
  58.   try {
  59.     location.pathname = decodeURI(location.pathname);
  60.   } catch (e) {
  61.     if (e instanceof URIError) {
  62.       throw new URIError(
  63.         'Pathname "' +
  64.           location.pathname +
  65.           '" could not be decoded. ' +
  66.           'This is likely caused by an invalid percent-encoding.'
  67.       );
  68.     } else {
  69.       throw e;
  70.     }
  71.   }
  73.   if (key) location.key = key;
  75.   if (currentLocation) {
  76.     // Resolve incomplete/relative pathname relative to current location.
  77.     if (!location.pathname) {
  78.       location.pathname = currentLocation.pathname;
  79.     } else if (location.pathname.charAt(0) !== '/') {
  80.       location.pathname = resolvePathname(
  81.         location.pathname,
  82.         currentLocation.pathname
  83.       );
  84.     }
  85.   } else {
  86.     // When there is no prior location and pathname is empty, set it to /
  87.     if (!location.pathname) {
  88.       location.pathname = '/';
  89.     }
  90.   }
  92.   return location;
  93. }
  95. export function locationsAreEqual(a, b) {
  96.   return (
  97.     a.pathname === b.pathname &&
  98.     a.search === b.search &&
  99.     a.hash === b.hash &&
  100.     a.key === b.key &&
  101.     valueEqual(a.state, b.state)
  102.   );
  103. }

createBrowserHistory

  1. import { createLocation } from './LocationUtils.js';
  2. import {
  3.   addLeadingSlash,
  4.   stripTrailingSlash,
  5.   hasBasename,
  6.   stripBasename,
  7.   createPath
  8. } from './PathUtils.js';
  9. import createTransitionManager from './createTransitionManager.js';
  10. import {
  11.   canUseDOM,
  12.   getConfirmation,
  13.   supportsPopStateOnHashChange,
  14.   isExtraneousPopstateEvent
  15. } from './DOMUtils.js';
  16. import invariant from './invariant.js';
  17. import warning from './warning.js';
  19. const PopStateEvent = 'popstate';
  20. const HashChangeEvent = 'hashchange';
  22. function getHistoryState() {
  23.   try {
  24.     return window.history.state || {};
  25.   } catch (e) {
  26.     // IE 11 sometimes throws when accessing window.history.state
  27.     // See https://github.com/ReactTraining/history/pull/289
  28.     return {};
  29.   }
  30. }
  32. function supportsHistory() {
  33.   const ua = window.navigator.userAgent;
  35.   if (
  36.     (ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&
  37.     ua.indexOf('Mobile Safari') !== -1 &&
  38.     ua.indexOf('Chrome') === -1 &&
  39.     ua.indexOf('Windows Phone') === -1
  40.   )
  41.     return false;
  43.   return window.history && 'pushState' in window.history;
  44. }
  46. /**
  47.  * Creates a history object that uses the HTML5 history API including
  48.  * pushState, replaceState, and the popstate event.
  49.  */
  50. function createBrowserHistory(props = {}) {
  51.   invariant(canUseDOM, 'Browser history needs a DOM');
  53.   const globalHistory = window.history;
  54.   const canUseHistory = supportsHistory();
  55.   const needsHashChangeListener = !supportsPopStateOnHashChange();
  57.   const {
  58.     forceRefresh = false,
  59.     getUserConfirmation = getConfirmation,
  60.     keyLength = 6
  61.   } = props;
  62.   const basename = props.basename
  63.     ? stripTrailingSlash(addLeadingSlash(props.basename))
  64.     : '';
  66.   function getDOMLocation(historyState) {
  67.     const { key, state } = historyState || {};
  68.     const { pathname, search, hash } = window.location;
  70.     let path = pathname + search + hash;
  72.     warning(
  73.       !basename || hasBasename(path, basename),
  74.       'You are attempting to use a basename on a page whose URL path does not begin ' +
  75.         'with the basename. Expected path "' +
  76.         path +
  77.         '" to begin with "' +
  78.         basename +
  79.         '".'
  80.     );
  82.     if (basename) path = stripBasename(path, basename);
  84.     return createLocation(path, state, key);
  85.   }
  87.   function createKey() {
  88.     return Math.random()
  89.       .toString(36)
  90.       .substr(2, keyLength);
  91.   }
  93.   const transitionManager = createTransitionManager();
  95.   function setState(nextState) {
  96.     Object.assign(history, nextState);
  97.     history.length = globalHistory.length;
  98.     transitionManager.notifyListeners(history.location, history.action);
  99.   }
  101.   function handlePopState(event) {
  102.     // Ignore extraneous popstate events in WebKit.
  103.     if (isExtraneousPopstateEvent(event)) return;
  104.     handlePop(getDOMLocation(event.state));
  105.   }
  107.   function handleHashChange() {
  108.     handlePop(getDOMLocation(getHistoryState()));
  109.   }
  111.   let forceNextPop = false;
  113.   function handlePop(location) {
  114.     if (forceNextPop) {
  115.       forceNextPop = false;
  116.       setState();
  117.     } else {
  118.       const action = 'POP';
  120.       transitionManager.confirmTransitionTo(
  121.         location,
  122.         action,
  123.         getUserConfirmation,
  124.         ok => {
  125.           if (ok) {
  126.             setState({ action, location });
  127.           } else {
  128.             revertPop(location);
  129.           }
  130.         }
  131.       );
  132.     }
  133.   }
  135.   function revertPop(fromLocation) {
  136.     const toLocation = history.location;
  138.     // TODO: We could probably make this more reliable by
  139.     // keeping a list of keys we've seen in sessionStorage.
  140.     // Instead, we just default to 0 for keys we don't know.
  142.     let toIndex = allKeys.indexOf(toLocation.key);
  144.     if (toIndex === -1) toIndex = 0;
  146.     let fromIndex = allKeys.indexOf(fromLocation.key);
  148.     if (fromIndex === -1) fromIndex = 0;
  150.     const delta = toIndex - fromIndex;
  152.     if (delta) {
  153.       forceNextPop = true;
  154.       go(delta);
  155.     }
  156.   }
  158.   const initialLocation = getDOMLocation(getHistoryState());
  159.   let allKeys = [initialLocation.key];
  161.   // Public interface
  163.   function createHref(location) {
  164.     return basename + createPath(location);
  165.   }
  167.   function push(path, state) {
  168.     warning(
  169.       !(
  170.         typeof path === 'object' &&
  171.         path.state !== undefined &&
  172.         state !== undefined
  173.       ),
  174.       'You should avoid providing a 2nd state argument to push when the 1st ' +
  175.         'argument is a location-like object that already has state; it is ignored'
  176.     );
  178.     const action = 'PUSH';
  179.     const location = createLocation(path, state, createKey(), history.location);
  181.     transitionManager.confirmTransitionTo(
  182.       location,
  183.       action,
  184.       getUserConfirmation,
  185.       ok => {
  186.         if (!ok) return;
  188.         const href = createHref(location);
  189.         const { key, state } = location;
  191.         if (canUseHistory) {
  192.           globalHistory.pushState({ key, state }, null, href);
  194.           if (forceRefresh) {
  195.             window.location.href = href;
  196.           } else {
  197.             const prevIndex = allKeys.indexOf(history.location.key);
  198.             const nextKeys = allKeys.slice(0, prevIndex + 1);
  200.             nextKeys.push(location.key);
  201.             allKeys = nextKeys;
  203.             setState({ action, location });
  204.           }
  205.         } else {
  206.           warning(
  207.             state === undefined,
  208.             'Browser history cannot push state in browsers that do not support HTML5 history'
  209.           );
  211.           window.location.href = href;
  212.         }
  213.       }
  214.     );
  215.   }
  217.   function replace(path, state) {
  218.     warning(
  219.       !(
  220.         typeof path === 'object' &&
  221.         path.state !== undefined &&
  222.         state !== undefined
  223.       ),
  224.       'You should avoid providing a 2nd state argument to replace when the 1st ' +
  225.         'argument is a location-like object that already has state; it is ignored'
  226.     );
  228.     const action = 'REPLACE';
  229.     const location = createLocation(path, state, createKey(), history.location);
  231.     transitionManager.confirmTransitionTo(
  232.       location,
  233.       action,
  234.       getUserConfirmation,
  235.       ok => {
  236.         if (!ok) return;
  238.         const href = createHref(location);
  239.         const { key, state } = location;
  241.         if (canUseHistory) {
  242.           globalHistory.replaceState({ key, state }, null, href);
  244.           if (forceRefresh) {
  245.             window.location.replace(href);
  246.           } else {
  247.             const prevIndex = allKeys.indexOf(history.location.key);
  249.             if (prevIndex !== -1) allKeys[prevIndex] = location.key;
  251.             setState({ action, location });
  252.           }
  253.         } else {
  254.           warning(
  255.             state === undefined,
  256.             'Browser history cannot replace state in browsers that do not support HTML5 history'
  257.           );
  259.           window.location.replace(href);
  260.         }
  261.       }
  262.     );
  263.   }
  265.   function go(n) {
  266.     globalHistory.go(n);
  267.   }
  269.   function goBack() {
  270.     go(-1);
  271.   }
  273.   function goForward() {
  274.     go(1);
  275.   }
  277.   let listenerCount = 0;
  279.   function checkDOMListeners(delta) {
  280.     listenerCount += delta;
  282.     if (listenerCount === 1 && delta === 1) {
  283.       window.addEventListener(PopStateEvent, handlePopState);
  285.       if (needsHashChangeListener)
  286.         window.addEventListener(HashChangeEvent, handleHashChange);
  287.     } else if (listenerCount === 0) {
  288.       window.removeEventListener(PopStateEvent, handlePopState);
  290.       if (needsHashChangeListener)
  291.         window.removeEventListener(HashChangeEvent, handleHashChange);
  292.     }
  293.   }
  295.   let isBlocked = false;
  297.   function block(prompt = false) {
  298.     const unblock = transitionManager.setPrompt(prompt);
  300.     if (!isBlocked) {
  301.       checkDOMListeners(1);
  302.       isBlocked = true;
  303.     }
  305.     return () => {
  306.       if (isBlocked) {
  307.         isBlocked = false;
  308.         checkDOMListeners(-1);
  309.       }
  311.       return unblock();
  312.     };
  313.   }
  315.   function listen(listener) {
  316.     const unlisten = transitionManager.appendListener(listener);
  317.     checkDOMListeners(1);
  319.     return () => {
  320.       checkDOMListeners(-1);
  321.       unlisten();
  322.     };
  323.   }
  325.   const history = {
  326.     length: globalHistory.length,
  327.     action: 'POP',
  328.     location: initialLocation,
  329.     createHref,
  330.     push,
  331.     replace,
  332.     go,
  333.     goBack,
  334.     goForward,
  335.     block,
  336.     listen
  337.   };
  339.   return history;
  340. }
  342. export default createBrowserHistory;

createTransitionManager 监听器

当BrowserHistory发出setState时，会执行对应的listener

  1. import warning from './warning.js';
  3. function createTransitionManager() {
  4.   let prompt = null;
  6.   function setPrompt(nextPrompt) {
  7.     warning(prompt == null, 'A history supports only one prompt at a time');
  9.     prompt = nextPrompt;
  11.     return () => {
  12.       if (prompt === nextPrompt) prompt = null;
  13.     };
  14.   }
  16.   function confirmTransitionTo(
  17.     location,
  18.     action,
  19.     getUserConfirmation,
  20.     callback
  21.   ) {
  22.     // TODO: If another transition starts while we're still confirming
  23.     // the previous one, we may end up in a weird state. Figure out the
  24.     // best way to handle this.
  25.     if (prompt != null) {
  26.       const result =
  27.         typeof prompt === 'function' ? prompt(location, action) : prompt;
  29.       if (typeof result === 'string') {
  30.         if (typeof getUserConfirmation === 'function') {
  31.           getUserConfirmation(result, callback);
  32.         } else {
  33.           warning(
  34.             false,
  35.             'A history needs a getUserConfirmation function in order to use a prompt message'
  36.           );
  38.           callback(true);
  39.         }
  40.       } else {
  41.         // Return false from a transition hook to cancel the transition.
  42.         callback(result !== false);
  43.       }
  44.     } else {
  45.       callback(true);
  46.     }
  47.   }
  49.   let listeners = [];
  51.   function appendListener(fn) {
  52.     let isActive = true;
  54.     function listener(...args) {
  55.       if (isActive) fn(...args);
  56.     }
  58.     listeners.push(listener);
  60.     return () => {
  61.       isActive = false;
  62.       listeners = listeners.filter(item => item !== listener);
  63.     };
  64.   }
  66.   function notifyListeners(...args) {
  67.     listeners.forEach(listener => listener(...args));
  68.   }
  70.   return {
  71.     setPrompt,
  72.     confirmTransitionTo,
  73.     appendListener,
  74.     notifyListeners
  75.   };
  76. }
  78. export default createTransitionManager;