Add capability to overwrite session storage key

README.md

@@ -86,9 +86,15 @@ Pass the `history` object as an argument to `configureRouterHistory`. The return
 
 ```javascript
 // store.js
-import { configureRouterHistory } from 'react-router-redux-history'
+import { configureRouterHistory } from 'react-redux-history'
 
-const { routerReducer, routerMiddleware } = configureRouterHistory(history)
+// optional, defaults are listed below
+const options = {
+  // what key to use for session storage entry
+  storageKey: 'routerState'
+}
+
+const { routerReducer, routerMiddleware } = configureRouterHistory(history, options)
 ```
 
 <br>

src/LocationListener.tsx

@@ -1,10 +1,10 @@
 import { useLayoutEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import type { BrowserHistory, Update } from 'history';
+import type { History, Update } from 'history';
 
 import { LOCATION_CHANGE, type LocationListenerProps } from './types';
 
-export const useLocationListener = (history: BrowserHistory) => {
+export const useLocationListener = (history: History) => {
   const dispatch = useDispatch();
 
   useLayoutEffect(() => {

src/index.ts

@@ -2,9 +2,10 @@ import type { History } from 'history';
 
 import createRouterMiddleware from './middleware';
 import createRouterSlice from './slice';
+import type { Options } from './types';
 
-export const configureRouterHistory = (history: History) => {
-  const { routerReducer, routerActions } = createRouterSlice(history);
+export const configureRouterHistory = (history: History, { storageKey = 'routerState' } = {} as Partial<Options>) => {
+  const { routerReducer, routerActions } = createRouterSlice(history, { storageKey });
   const routerMiddleware = createRouterMiddleware(history, routerActions);
 
   return {

src/initialState.ts

@@ -1,7 +1,7 @@
-import type { BrowserHistory } from 'history';
+import type { History } from 'history';
 
 import { persistOnPageHide, getSessionState } from './persist';
-import { ActionTypes, type AppRouterState } from './types';
+import { ActionTypes, type AppRouterState, type Options } from './types';
 
 import {
   parseLocation,
@@ -10,7 +10,7 @@ import {
   isNextRoute
 } from './helpers'
 
-const getInitialState = (history: BrowserHistory): AppRouterState => {
+const getInitialState = (history: History, { storageKey }: Options): AppRouterState => {
   const location = parseLocation(history.location);
   const defaultState: AppRouterState = {
     action: ActionTypes.Push,
@@ -19,7 +19,7 @@ const getInitialState = (history: BrowserHistory): AppRouterState => {
     isSkipping: false,
   };
 
-  const sessionRouterState = getSessionState();
+  const sessionRouterState = getSessionState(storageKey);
   const initialState = sessionRouterState || defaultState;
 
   if (sessionRouterState) {
@@ -50,7 +50,7 @@ const getInitialState = (history: BrowserHistory): AppRouterState => {
     initialState.isSkipping = false;
   }
 
-  persistOnPageHide(initialState);
+  persistOnPageHide(initialState, { storageKey });
 
   return initialState;
 };

src/persist.ts

@@ -1,23 +1,25 @@
-import type { AppRouterState } from './types';
+import type { AppRouterState, Options } from './types';
 
 let pageHideListener;
 
-const saveToSessionStorage = (state: Readonly<AppRouterState>): void => sessionStorage.setItem('routerState', JSON.stringify(state));
+const saveToSessionStorage = (state: Readonly<AppRouterState>, { storageKey }: Options) => {
+  sessionStorage.setItem(storageKey, JSON.stringify(state));
+};
 
-export const persistOnPageHide = (state: Readonly<AppRouterState>): void => {
+export const persistOnPageHide = (state: Readonly<AppRouterState>, { storageKey }: Options) => {
   if (pageHideListener) {
     window.removeEventListener('pagehide', pageHideListener);
   }
 
-  pageHideListener = () => saveToSessionStorage(state);
+  pageHideListener = () => saveToSessionStorage(state, { storageKey });
   window.addEventListener('pagehide', pageHideListener, { once: true });
 };
 
-export const getSessionState = (): AppRouterState => {
+export const getSessionState = (storageKey: string): AppRouterState => {
   let sessionRouterState: AppRouterState;
 
   try {
-    const serializedSessionRouterState = sessionStorage.getItem('routerState');
+    const serializedSessionRouterState = sessionStorage.getItem(storageKey);
 
     sessionRouterState = serializedSessionRouterState && JSON.parse(serializedSessionRouterState);
 

src/slice.ts

@@ -1,4 +1,5 @@
 import { createSlice, current, type PayloadAction } from '@reduxjs/toolkit';
+import type { History } from 'history';
 
 import getInitialState from './initialState';
 import { persistOnPageHide } from './persist';
@@ -8,13 +9,14 @@ import {
   type AppRouterState,
   type LocationChangeAction,
   type LocationChangePayload,
+  type Options,
   ActionTypes
 } from './types';
 
-const createRouterSlice = (history) => {
+const createRouterSlice = (history: History, { storageKey }: Options) => {
   const routerSlice = createSlice({
     name: 'router',
-    initialState: getInitialState(history),
+    initialState: getInitialState(history, { storageKey }),
     reducers: {
       push: (state: AppRouterState, action: LocationChangeAction) => {
         const newLocation = parseLocation(action.payload.location);
@@ -23,7 +25,7 @@ const createRouterSlice = (history) => {
         state.action = ActionTypes.Push;
         state.locationHistory.splice(state.currentIndex, state.locationHistory.length, newLocation);
 
-        persistOnPageHide(current(state));
+        persistOnPageHide(current(state), { storageKey });
       },
       replace: (state: AppRouterState, action: LocationChangeAction) => {
         const newLocation = parseLocation(action.payload.location);
@@ -43,7 +45,7 @@ const createRouterSlice = (history) => {
 
         delete state.locationHistory[state.currentIndex].state.forceRender;
 
-        persistOnPageHide(current(state));
+        persistOnPageHide(current(state), { storageKey });
       },
       back: (state: AppRouterState, action: PayloadAction<LocationChangePayload>) => {
         const { nextLocationIndex, isSkipping = false } = action.payload;
@@ -67,7 +69,7 @@ const createRouterSlice = (history) => {
 
         delete state.locationHistory[nextLocationIndex].state.forceRender;
 
-        persistOnPageHide(current(state));
+        persistOnPageHide(current(state), { storageKey });
       },
       forward: (state: AppRouterState, action: PayloadAction<LocationChangePayload>) => {
         const { nextLocationIndex, isSkipping = false } = action.payload;
@@ -91,12 +93,12 @@ const createRouterSlice = (history) => {
 
         delete state.locationHistory[nextLocationIndex].state.forceRender;
 
-        persistOnPageHide(current(state));
+        persistOnPageHide(current(state), { storageKey });
       },
       setSkipping: (state: AppRouterState, action: PayloadAction<boolean>) => {
         state.isSkipping = action.payload;
 
-        persistOnPageHide(current(state));
+        persistOnPageHide(current(state), { storageKey });
       },
     },
   });

src/types.ts

@@ -1,6 +1,6 @@
 import type { NavigateFunction } from 'react-router';
 import type { CaseReducerActions, PayloadAction } from '@reduxjs/toolkit';
-import type { BrowserHistory, Action, Location, Update, History } from 'history';
+import type { Action, Location, Update, History } from 'history';
 
 export enum ActionTypes {
   Push = 'PUSH',
@@ -64,7 +64,7 @@ export type SliceActions = CaseReducerActions<{
 }, 'router'>
 
 export interface LocationListenerProps {
-  history: BrowserHistory;
+  history: History;
 }
 
 export type NavigateAwayCallback = ({ action, nextLocation }: NavigateAwayCallbackParams) => void;
@@ -79,3 +79,7 @@ export interface NavigateAwayProps {
   callback: NavigateAwayCallback;
   history: History;
 }
+
+export interface Options {
+  storageKey: string;
+}