Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') after version migration of react-router-redux to connecter-react-router

Question

I was working with old packages in my react project. Now im on process of upgrading the old version. After changing the react-router-redux to connected-react-router i have encountered with this error.

<Provider store={store}>   
  <ConnectedRouter  history={history} >   
    <BrowserRouter>          
        <Routes>                           
         <Route path="/" element={<PageLogin/>} > </Route>                   
        </Routes>
      </BrowserRouter>
     </ConnectedRouter>
   </Provider>

when i comment the <ConnectedRouter> , there will be another error. which means the error is occurring at that level.

More than this modules i'm using react-hot-loader , react-rewire modules also. redux store is well declared because i can see the router information. Can anyone help? i'm stucked here for one week.

Answer 1

react-router v6 is not compatible with connected-react-router, use redux-first-history.

in index.js

import { HistoryRouter as Router } from "redux-first-history/rr6"

const root = ReactDOM.createRoot(document.getElementById('root'));
console.log(history)
root.render(
  <Provider store={store} >
    <Router history={history}>
      <App />
    </Router>
  </Provider>
  
);

and in store.js

import { createReduxHistoryContext } from "redux-first-history";
import { combineReducers } from "redux";


const {createReduxHistory,
routerMiddleware,
routerReducer
} = createReduxHistoryContext ({
    history: createBrowserHistory () });

    export const store = configureStore({
        reducer: combineReducers({
            router: routerReducer,
            //another reducer
        }),
        middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().concat(
            logger,
            routerMiddleware,
           //another middleware
        )
    })

    export const history = createReduxHistory(store)