React : Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')

Question

I'm readapting my routes but an error appears "Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')" and I can't solve it, I've been going around in circles for hours. I'm fairly new to react. I think I am using BrowserRouter, Routes, Router incorrectly etc Can anyone help me ?

errors:

  components.tsx:197 Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')
        at Router (components.tsx:197:1)
        at renderWithHooks (react-dom.development.js:16305:1)
        at mountIndeterminateComponent (react-dom.development.js:20074:1)
        at beginWork (react-dom.development.js:21587:1)
        at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
        at invokeGuardedCallback (react-dom.development.js:4277:1)
        at beginWork$1 (react-dom.development.js:27451:1)
        at performUnitOfWork (react-dom.development.js:26557:1)
        at workLoopSync (react-dom.development.js:26466:1)

    react-dom.development.js:18687 The above error occurred in the <Router> component:
    
        at Router (http://localhost:3000/static/js/bundle.js:108514:15)
        at ConnectedRouter (http://localhost:3000/static/js/bundle.js:53802:7)
        at ConnectedRouterWithContext (http://localhost:3000/static/js/bundle.js:53925:25)
        at ConnectFunction (http://localhost:3000/static/js/bundle.js:104929:114)
        at Provider (http://localhost:3000/static/js/bundle.js:104640:5)
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Voici index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux'
import {Route, Routes} from 'react-router'
import { ConnectedRouter } from 'connected-react-router'
import App from "./App";
import { store, history } from './configureStore'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    (<Provider store={store}>
        <ConnectedRouter history={history}>
            <Routes>
                <Route path="/" component={App}/>
            </Routes>
        </ConnectedRouter>
    </Provider>)
);

App.js:

import React from 'react';
import {requests} from "./agent";
import Navigation from "./components/Navigation";
import {Route, Routes} from "react-router";
import HomePage from "./Pages/HomePage";
import LoginPage from "./Pages/LoginPage";
import RegisterPage from "./Pages/RegisterPage";
import Dashboard from "./Pages/Dashboard";
import News from "./Pages/News";
import Missions from "./Pages/Missions";
import Associations from "./Pages/Associations";
import {BrowserRouter} from "react-router-dom";

class App extends React.Component{
    constructor(props) {
        super(props);
        const token = window.localStorage.getItem('jwtToken');

        if(token) {
            requests.setToken(token)
        }
    }

    render() {
        return (
                <BrowserRouter>
                    <Navigation  />
                    <Routes>
                        <Route path='/' element={<HomePage />}/>
                        <Route path='/login' element={<LoginPage />}/>
                        <Route path='/register' element={<RegisterPage />}/>
                    </Routes>
                </BrowserRouter>
        )
    }
}

export default App;

Answer 1

Instead of using

<BrowserRouter> 

try using

<Router> 

Answer 2

Unfortunately connected-react-router hasn't updated to be compatible with react-router-dom@6, and the author hasn't been active. connected-react-router seems to be a dead project. A replacement I've found that works (IMO) equally well is redux-first-history.

Basic Setup:

1. Add redux-first-history to the project.

   npm install --save redux-first-history

2. Create custom history object & Configure Redux store

   import { combineReducers } from "redux";
   import { configureStore } from "@reduxjs/toolkit";
   import { createReduxHistoryContext } from "redux-first-history";
   import { createBrowserHistory } from "history";
   
   const {
     createReduxHistory,
     routerMiddleware,
     routerReducer
   } = createReduxHistoryContext({ history: createBrowserHistory() });
   
   export const store = configureStore({
     reducer: combineReducers({
       router: routerReducer
     }),
     middleware: [routerMiddleware]
   });
   
   export const history = createReduxHistory(store);
   

3. Import and render correct router

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

   ...

   class App extends React.Component{
     constructor(props) {
       super(props);
       const token = window.localStorage.getItem('jwtToken');
   
       if (token) {
         requests.setToken(token)
       }
     }
   
     render() {
       return (
         <>
           <Navigation  />
           <Routes>
             <Route path='/' element={<HomePage />}/>
             <Route path='/login' element={<LoginPage />}/>
             <Route path='/register' element={<RegisterPage />}/>
           </Routes>
         </>
       );
     }
   }
   

This solution might not work with the new RRDv6.4 Data APIs.