History

React-Router has a dependency on the history package. history is a JavaScript library used in maintaining sessions in any JavaScript application. Consider the following quote from history’s documentation (https://github.com/ReactTraining/history):

The history object has several properties and methods:

• action: The current action, PUSH, POP, or REPLACE
• length: The count of entries in the history stack
• location: The current location, which includes the hash, pathname, search, and state properties
  • hash: Hash fragment 
  • pathname: URL path
  • search: URL query string
  • state: The state information provided when navigating from one route to the other using location.pushState
• block(): A function that registers a prompt message that will be displayed when the user tries to navigate away from the current page.
• createHref(): A function that constructs a URL segment; it accepts an object with the pathname, search, and hash properties.
• go(n): A function that navigates through the history stack. history.go(-1) moves the pointer back by one position and history.go(1) moves the pointer forward by one position in the history stack.
• goBack(): A function that navigates the pointer back by one position in the history stack; the same as history.go(-1).
• goForward(): A function that navigates the pointer forward by one position in the history stack; the same as history.go(1).
• listen(listenerFn): A function that registers a listener function that gets called whenever there's a change in history.location.
• push(path, state?): A function that navigates to the given pathname, adding an entry to the history stack. It optionally accepts a state parameter, which can be used to pass application state data.
• replace(path, state?): A function that navigates to the given pathname, replacing the current entry in the history stack. It also accepts an optional state parameter.

The history object is used by React-Router internally to update the entries in the history stack when the user tries to navigate between pages. It's provided to the rendered component as a prop so that the user can be navigated to different pages using the aforementioned methods in the history object. In the next chapter, we will take a look at various APIs provided by React-Router that help you navigate to different routes defined in the application.