history

What is history?

The history package is a JavaScript library that lets you manage session history anywhere JavaScript runs. It provides a minimal API that lets you manage the history stack, navigate, and persist state between sessions. It is commonly used in conjunction with libraries like React Router but can be used standalone as well.

What are history's main functionalities?

Manage session history

This feature allows you to create a history object and manipulate the browser's session history by pushing new entries onto the history stack.

const { createBrowserHistory } = require('history');
const history = createBrowserHistory();
history.push('/home', { some: 'state' });

Navigate programmatically

This feature enables you to navigate through the history stack programmatically, either going back or forward.

history.go(-1); // Go back one entry in the history stack
history.goForward(); // Go forward one entry in the history stack

Listen for changes to the current location

This feature allows you to listen for changes in the current location, which is useful for reacting to navigation events.

const unlisten = history.listen((location, action) => {
  console.log(action, location.pathname, location.state);
});
// To stop listening
unlisten();

Persist state between sessions

This feature allows you to push state onto the history stack and access it later, which is useful for persisting information across sessions without using local storage or cookies.

history.push('/location', { user: '12345' });
// The state can be accessed later
const location = history.location;
const state = location.state; // { user: '12345' }

Other packages similar to history

react-router

React Router is a collection of navigational components that compose declaratively with your application. It provides bindings to the history library, making it easier to use with React applications. It is more feature-rich and tailored specifically for React, compared to the more general-purpose history package.

vue-router

Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. It provides similar functionalities for managing navigation and history in Vue applications, analogous to what history does for more general JavaScript applications.

reach-router

Reach Router is a small, simple router for React that borrows from the ideas of the history package. It provides easy route definition and navigation but has been officially replaced by React Router as of version 6.

navigo

Navigo is a simple vanilla JavaScript router with a similar API to history. It provides a powerful router with a small footprint that does not necessarily rely on the history API provided by the browser.

README

history ·

The history library lets you easily manage session history anywhere JavaScript runs. A history object abstracts away the differences in various environments and provides a minimal API that lets you manage the history stack, navigate, and persist state between sessions.

Documentation

Documentation for version 5 can be found in the docs directory. This is the current stable release. Version 5 is used in React Router version 6.

Documentation for version 4 can be found on the v4 branch. Version 4 is used in React Router versions 4 and 5.

Changes

To see the changes that were made in a given release, please lookup the tag on the releases page.

For changes released in version 4.6.3 and earlier, please see the CHANGES.md file.

Development

Development of the current stable release, version 5, happens on the master branch. Please keep in mind that this branch may include some work that has not yet been published as part of an official release. However, since master is always stable, you should feel free to build your own working release straight from master at any time.

If you're interested in helping out, please read our contributing guidelines.

About

history is developed and maintained by React Training. If you're interested in learning more about what React can do for your company, please get in touch!

Thanks

A big thank-you to BrowserStack for providing the infrastructure that allows us to run our build in real browsers.

Also, thanks to Dan Shaw for letting us use the history npm package name. Thanks, Dan!