reactjsaxiosreact-router-domredux-sagareact-router-redux

React router dom v6.26.1 changes url but not re-render the component


I'm having an issue with the page refresh after, when clicking on the button url gets changed in the browser but the page doesn't refresh the correct component, no browser error no terminal error, everything is good at the code level.

please find the sandbox link

error in sandbox -> enter image description here

<BrowserRouter>
  <Suspense fallback={<Loader />}>
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/login-otp" element={<LoginOtp />} />
      <Route path="*" element={<Error />} />
    </Routes>
  </Suspense>
</BrowserRouter>

Below is the Redux-saga method call where exactly I'm trying to push the URL on OTP page after API success as I say URL is changing but OTP page does not re-render the UI.

import axios from 'axios';
import { put, call } from 'redux-saga/effects';
import { push } from 'react-router-redux';
function* submitEmail(action: any) {
    try {
        const payload = {
            username: 'emilys',
            password: 'emilyspass',
            expiresInMins: 30,
        };
        const http: [string, object] = [`https://dummyjson.com/auth/login`, payload];
        const { data: res } = yield call(axios.post, ...http);
        if (res?.token) {
            yield put(push('/login-otp'));
        } else {
            console.log("res:: ", res)
        }
    } catch (e) {
        console.log("error:: ", e)
    }
}

this is how I set up Redux config

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { createInjectorsEnhancer } from 'redux-injectors';
import { connectRouter } from 'connected-react-router';
import { routerMiddleware } from 'react-router-redux';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();

const staticReducers = {
  router: connectRouter(history),
}

function createReducer(asyncReducers?: any) {
  return combineReducers({
    ...staticReducers,
    ...asyncReducers
  })
}


export default function configureStore() {
  const sagaMiddleware = createSagaMiddleware();
  const runSaga = sagaMiddleware.run;
  const composeEnhancers =
    process.env.NODE_ENV !== 'prod' &&
      typeof window === 'object' &&
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__<any>({
        shouldHotReload: false,
      })
      : compose;

  const injectEnhancer = createInjectorsEnhancer({
    createReducer,
    runSaga,
  })

  const store: any = createStore(
    createReducer(),
    composeEnhancers(
      applyMiddleware(
        sagaMiddleware,
        routerMiddleware(history)
      ),
      injectEnhancer
    )
  );

  store.asyncReducers = {};

  return store;
};

index.tsx file

import configureStore from './path';
const store = configureStore();
    const root = ReactDOM.createRoot(
      document.getElementById('root') as HTMLElement
    );
    root.render(
      <React.StrictMode>
        <Provider store={store}>
              <App />
        </Provider>
      </React.StrictMode>
    );

yield put(push('/login-otp')); --> this make the route update but not update UI.


Solution

  • Issue

    React-Router-Redux is very old and deprecated, their repo points you to Connected-React-Router, and it's not even compatible with the last previous React-Router-DOM version.

    Project Deprecated

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

    • connected-react-router

    ⚠️ This repo is for react-router-redux 4.x, which is only compatible with react-router 2.x and 3.x

    Unfortunately at this point in time Connected-React-Router is also a dead project and hasn't been updated to be compatible with React-Router-Dom v6.

    Solution Suggestion

    The current/modern replacement library for connecting RRDv6 to Redux is Redux-First-History.

    You are also using old/outdated Redux code. Modern Redux is written using Redux-Toolkit. It's highly recommended to update to RTK.

    Here's an example modern refactor/implementation: