A simple, lightweight library for managing navigation history in React and Redux

Last update: Jul 23, 2022

🚧 Beta version

maintained issues minsize license version

Redux history made easy!

A simple, lightweight library for managing navigation history in React and Redux.

Used in production by Utilmond. Check it out!

Features

📜 Saves all routing history in store and offers selectors for easy access

🌲 History is persisted even after reloading the page

⏭️ Skipping screens capability out of the box just by passing a flag when navigating

👀 Everything you need to know about your navigation state and history directly in your favorite developer tools

Redux DevTools with router history

🔗 Installation

npm install react-redux-history react-router redux history

📤 Setup

Step 1)

Create a history object:

// store.js
import { createBrowserHistory } from 'history'

export const history = createBrowserHistory() // export this as we will need it later

Step 2)

Pass the history object as an argument to configureRouterHistory. The returned reducer and middleware will be used to connect to the store.

// store.js
import { configureRouterHistory } from 'react-router-redux-history'

const { routerReducer, routerMiddleware } = configureRouterHistory(history)

Step 3)

Add the reducer and middleware to your store. If you are using Redux Toolkit it might look something like this:

// store.js
const store = configureStore({
  reducer: combineReducers({
    // ...other reducers
    router: routerReducer
  }),
  middleware: (getDefaultMiddleware) => getDefaultMiddleware()
    // ...other middleware
    .prepend(routerMiddleware)
});

export default store

Step 4)

Lastly, wrap your react-router routing with ConnectedRouter and pass the history object as a prop. Remember to delete any usage of BrowserRouter or NativeRouter as leaving this in will cause problems synchronising the state. Place ConnectedRouter as a child of react-redux's Provider.

// index.js
import { Provider } from 'react-redux'
import { Route, Switch } from 'react-router'
import { ConnectedRouter } from 'react-redux-history'

import store, { history } from './store'

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */ }
      <> { /* your usual react-router v4/v5 routing */ }
        <Switch>
          <Route />
          <Route />
          ...
        </Switch>
      </>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
)

Note: the history object provided to configureRouterHistory and ConnectedRouter component must be the same history object!

⏭️ Skip back / forward

By setting a skipBack / skipForward flag on a specific route the user will be automatically skipped over certain routes.

history.push({
  pathname: 'page_5',
  state: { skipBack: 4 }
});

In this example, every time the user will try to go back from page_5 he will be skipped back 4 pages, reaching page_1. The same behaviour will apply when going forward from page_1, the user will be skipped back to page_5.

Note: due to the restrictive nature of browser navigation back or forward actions cannot be stopped. That means that in the previous example the user will actually reach page_4 before being redirected to page_1. If there is conflicting logic (such as extra redirects) in page_4 component it will be fired before the middleware manages to completely skip all screens. In order to get past this issue we can use the isSkipping flag to, for instance, not render the component tree while skipping. You can find a selector for this in the selectors section.

🌲 Persistent history

History is persisted even after page refresh by using local storage to save the state on page hide.

🚦 Selectors for easy access

There are also a few useful selectors for easy access:

  • selectAction
  • selectActionAlias
  • selectIsSkipping
  • selectCurrentIndex
  • selectHistory
  • selectLocation
  • selectLocationState
  • selectPreviousLocation
  • selectNextLocation

Note: the difference between action and actionAlias is that action will display "POP" for both back and forward navigations. It represents the action emitted by the browser. actionAlias will be more descriptive by using the actual "BACK" and "FORWARD" labels.

Huge thanks going to Utilmond team and connected-react-router for making this possible! 🍻

GitHub

https://github.com/fum4/react-redux-history
You might also like...

Front-end of the movie application created with React.js and Redux

Front-end of the movie application created with React.js and Redux

# Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run:

Aug 21, 2021

This command line helps you create components, pages and even redux implementation for your react project

This command line helps you create components, pages and even redux implementation for your react project

react-help-create This command line helps you create components, pages and even redux implementation for your react project. How to install it? To ins

Apr 6, 2022

Single page application for tracking cryptocurrencies. Includes sorting, animations, graphs and more. Made using React & Redux.

Single page application for tracking cryptocurrencies. Includes sorting, animations, graphs and more. Made using React & Redux.

Crypto Tracker A single page application meant to keep track of the most popular crypto currencies status. The user can sort the coins by highest gain

Oct 24, 2021

React with Redux, action, dispatch, reducer, store setup and guide

This Project has Snippets for react with redux steup, process and how to implemenntation details src-components-HomeButtons has old approach src-co

Nov 22, 2021

Shop Cart Page Built Using React And Redux

Shop Cart Page Built Using React And Redux

Getting Started with react-redux-jest-shop Shop cart page with use: React,redux,redux-thunk, API,JEST, LTR Steps for run git clone or download react-r

Apr 24, 2022

Single Page Application that uses Rick and Morty API along with React & Redux

Single Page Application that uses Rick and Morty API along with React & Redux

Rick and Morty Rick and Morty Characters Web Page. Single Page Application that

Apr 16, 2022

A little e-commerce website made with React.js, Redux and Bootstrap.

E-commerce React JS (in progress) This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: npm st

Jan 2, 2022

A React-Redux based project, built with pair programming and gitflow, following this kanban workflow

A React-Redux based project, built with pair programming and gitflow, following this kanban workflow

This is a React-Redux based project, built with pair programming and gitflow, following this kanban workflow. The page have a global state that holds the Rockets and missions from the spaceX API, and allow you to reserve them, displaying on your profile section the missions that you own.

Apr 5, 2022

Financial Metrics - about building a mobile web application to check a list of metrics that I create making use of React and Redux

Financial Metrics is about building a mobile web application to check a list of metrics (numeric values) that I create making use of React and Redux

Jun 4, 2022
Redux Tutorial - share my experience regarding redux, react-redux and redux-toolkit
Redux Tutorial - share my experience regarding redux, react-redux and redux-toolkit

Redux Tutorial 1. Introduction to Redux 1.1 What is Redux & why Redux? A small JS Library for managing medium/large amount of states globally in your

Jul 28, 2022
Skeleton React App configured with Redux store along with redux-thunk, redux persist and form validation using formik and yup

Getting Started with React-Redux App Some Configrations Needed You guys need to modify the baseUrl (path to your server) in the server.js file that is

Jul 10, 2022
A simple app for study react with redux, redux saga and typescript.

React com Redux, Redux-Saga e TypeScript. ?? Uma aplicação simple para entender o funcionamento do Redux e a melhor maneira de utiliza-lo junto com o

May 24, 2022
Redux - Create forms using Redux And React
Redux - Create forms using Redux And React

Exercício de fixação Vamos criar formulários utilizando Redux! \o/ Antes de inic

Jul 21, 2022
A Higher Order Component using react-redux to keep form state in a Redux store
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Aug 2, 2022
redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

redux-immutable redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state. When Redux creat

Aug 5, 2022
A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor
A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor

Redux DevTools Chart Monitor This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and

May 3, 2022
Ruthlessly simple bindings to keep react-router and redux in sync

Project Deprecated This project is no longer maintained. For your Redux <-> Router syncing needs with React Router 4+, please see one of these librari

Jul 29, 2022
Selector library for Redux

Reselect Simple “selector” library for Redux (and others) inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskat

Aug 2, 2022
An i18n solution for React/Redux and React Native projects
An i18n solution for React/Redux and React Native projects

redux-react-i18n An i18n solution with plural forms support for Redux/React Workers of all countries, unite! Supported languages list with expected co

Sep 30, 2021