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 ->

<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.

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:

• Create a Redux store with router reducer & middleware integrated (I think this captures all/most of your old implementation):

  import { combineReducers } from 'redux';
  import { configureStore } from "@reduxjs/toolkit";
  import { createReduxHistoryContext } from "redux-first-history";
  import createSagaMiddleware from 'redux-saga';
  import { createInjectorsEnhancer } from 'redux-injectors';
  import { createBrowserHistory } from 'history';
  
  const {
    createReduxHistory,
    routerMiddleware,
    routerReducer
  } = createReduxHistoryContext({ history: createBrowserHistory() });
  
  const staticReducers = {
    // ... other root-level reducers ...
    router: routerReducer,
  }
  
  const createReducer = (asyncReducers?: any) => combineReducers({
    ...staticReducers,
    ...asyncReducers
  });
  
  const sagaMiddleware = createSagaMiddleware();
  const runSaga = sagaMiddleware.run;
  
  const injectEnhancer = createInjectorsEnhancer({
    createReducer,
    runSaga,
  });
  
  export const store = configureStore({
    reducer: createReducer(),
    middleware: getDefaultMiddleware => 
      getDefaultMiddleware().concat(routerMiddleware, sagaMiddleware),
    enhancers: getDefaultEnhancers =>
      getDefaultEnhancers().concat(injectEnhancer),
  });
  
  store.asyncReducers = {};
  
  export const history = createReduxHistory(store);
  

• Import the store and history object and instantiate and wrap your app in a HistoryRouter:

  import { Provider } from "react-redux";
  import { unstable_HistoryRouter as Router } from 'react-router';
  import { history, store } from './path';
  
  const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
  );
  
  root.render(
    <React.StrictMode>
      <Provider store={store}>
        <Router history={history}>
          <App />
        </Router>
      </Provider>
    </React.StrictMode>
  );
  

  App.tsx - remove the router since it is rendered higher in the ReactTree now:

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