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;

Does this answer your question? React Router: Cannot read property 'pathname' of undefined — Youssouf Oumar
– Youssouf Oumar, Commented Sep 4, 2022 at 14:03
Why are you using more than one router? connected-react-router isn't compatible with react-router-dom@6. Are you looking for a redux connected routing solution that works with react-router-dom@6? — Drew Reese
– Drew Reese, Commented Sep 4, 2022 at 23:18
Thanks. If you don't mind can you edit post and share your Redux store configuration file/code as well? — Drew Reese
– Drew Reese, Commented Sep 6, 2022 at 21:53

Drew Reese · Accepted Answer · 2022-11-30 17:22:42Z

0

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:

Add redux-first-history to the project.

npm install --save redux-first-history

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

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.

edited Nov 30, 2022 at 17:22

answered Sep 6, 2022 at 23:35

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marine Over a year ago

It' works !! I just replaced <Router> by <BrowserRouter> in your example and it worked! Thank you very much, you are awesome!

jansyb04 Over a year ago

Is this the right router import { HistoryRouter as Router } from 'react-router'? I tried using it but got an error saying it was not a recognized import.

Jeheu Dela Cruz · Accepted Answer · 2022-09-06 12:21:24Z

0

Instead of using

<BrowserRouter>

try using

<Router>

answered Sep 6, 2022 at 12:21

Jeheu Dela Cruz

266 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related