Redux-persist: Redux-persist Implementation in React / connected-react-router

[Jin827]

I implemented redux-persist to react v16 / connected-react-router.
At first, everything seemed to work.
Redux store is connected to local storage and it persists states.
But I realized when I open the link (http://localhost:9080/reset?token=###) from my email to reset the password, the website just sticks to the current location.
When I tries to change url manually, it does not work.

The link is valid. When i open the link in other browsers, it works.
Url would be manually changed without redux-persist setting.

store.js

import { applyMiddleware, createStore } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import { composeWithDevTools } from 'redux-devtools-extension';
import { routerMiddleware, connectRouter } from 'connected-react-router';
import createBrowserHistory from 'history/createBrowserHistory';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import rootReducer from './src/reducers';

export const history = createBrowserHistory();
const middlewares = [
  routerMiddleware(history), 
  thunkMiddleware,
  createLogger({
    predicate: () => process.env.NODE_ENV === 'development',
    collapsed: true,
  }),
];
const enhancers = [applyMiddleware(...middlewares)];
const persistConfig = {
  key: 'root',
  storage,
};
const persistedReducer = persistReducer(
  persistConfig,
  rootReducer(history), 
);

export default preloadedState => {
  const store = createStore(
    persistedReducer,
    preloadedState,
    composeWithDevTools(...enhancers),
  );
  const persistor = persistStore(store);

  return { store, persistor };
};

index.js

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter as Router } from 'connected-react-router';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { PersistGate } from 'redux-persist/lib/integration/react';
import configureStore, { history } from './store';
import Routes from './routes';
import Loading from './src/shared/loading';

const theme = createMuiTheme({
 ...
});
const { store, persistor } = configureStore();
const root = document.createElement('div');
document.body.appendChild(root);

render(
  <Provider store={store}>
    <PersistGate loading={<Loading />} persistor={persistor}>
      <MuiThemeProvider theme={theme}>
        <Router history={history}>
          <Routes />
        </Router>
      </MuiThemeProvider>
    </PersistGate>
  </Provider>,
  root,
);

What I have tried.

And I have tried to add 'connectRouter' like below. It doesn't seem to change anything. Am I supposed to set 'connectRouter' in store ?

const store = createStore(
  // persistedReducer,
  connectRouter(history)(persistedReducer),
  composeWithDevTools(enhancers),
);

When i use 'rootReducer' instead of 'rootReducer(history)' as history will be duplicated with 'connectRouter(history)(persistedReducer)'. It will break with an error message : Cannot read property 'location' of undefined.

"connected-react-router": "^6.4.0"
"redux-persist": "^5.10.0"
"react": "^16.8.6"
"react-dom": "^16.8.6"
"redux": "^4.0.0"

Thanks !!

[mrtrebor]

Hey, did you try to put the router key to blacklist?

const persistConfig = {
  key: 'root',
  storage,
  blacklist: ['router'],
};

[Jin827]

Thank you !!!!!

[sohrobraja3]

@mrtrebor I am having the same issue; however, when I add the blacklist to the persistConfig, this prevents any routing throughout the application.
@Jin827 Are you still able to navigate to different routes with the blacklist field set?

[philwilks]

I've just tried this and everything works perfectly with blacklist: ['router']

[mszyndel]

@sohrobraja3 using

import { Route, Switch } from 'react-router'

instead of react-router-dom fixed this issue for me!