Issue: Router Redirection on Cached State with Redux-Persist and Redux-First-History

[usama-yaway]

Hi all, sharing a solution for anyone dealing with an issue combining redux-first-history and redux-persist in a project migrating from connected-react-router and react-router v5 to redux-first-history and preparing for react-router v6. We faced persistent redirection problems that might save others from spending an entire day troubleshooting.

Context
We initially had React Router v5 + Connected React Router. We then decided to:

1. Switch to Redux-First-History in place of Connected React Router.
2. Retain React Router v5 initially, while preparing for an upgrade to v6.
3. Use Redux-Persist for store persistence.

Problem
After migrating to redux-first-history as per the docs, our app started redirecting to the same initial URL after every page reload or cache clear. Regardless of the URL entered, the router persisted this "first URL" state due to the cache.

Setup

<Provider store={store}>
  <QueryClientProvider client={queryClient}>
    <PersistGate loading={null} persistor={persistStore(store)}>
      <MyRouter />
    </PersistGate>
  </QueryClientProvider>
</Provider>

import { Router as AppRouter, Route, Switch } from 'react-router-dom';

export const MyRouter: React.FC = () => (
  <AppRouter history={history}>
    <Suspense fallback={<Loader />}>
      <Switch>
        {/* Routes go here */}
      </Switch>
    </Suspense>
  </AppRouter>
);

Store Configuration

const persistConfig = {
  key: 'root',
  storage,
  timeout: 500,
};

const reducer = combineReducers({
  // other reducers
  router: routerReducer,
});

const persistedReducer = persistReducer(persistConfig, reducer);

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) => [
    routerMiddleware, 
    ...getDefaultMiddleware(),
  ],
});

Solution
The fix was to blacklist the router state from being persisted. Adding router to the blacklist in the persistConfig resolved the issue by preventing outdated router state from being cached and reused.

Updated Persist Config:

const persistConfig = {
  key: 'root',
  storage,
  timeout: 500,
  blacklist: ['router'], // Exclude router state
};

Conclusion
After blacklisting the router state, everything worked as expected. I'm not entirely sure of the exact mechanics here, but it appears that persisting the router state can interfere with redux-first-history functionality, likely due to conflicts with Redux-Persist’s rehydration process.

If anyone has deeper insights into why this works or other optimization tips, I’d love to hear them. Hope this helps!