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>
  

I can’t find the exact documentation for this version, but I assume <Routes> is valid and it is not replaced by <Route>. In either case, you are missing <Outlet/>. So your code should look like

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