React-router v6: Cannot read properties of undefined (reading 'pathname')

Question

I'm using react-router v6 and I'm trying to use a custom history to be able to navigate in redux actions (outside of a component). So I'm using Router from 'react-router instead of BrowserRouter from 'react-router-dom as mentionned in the doc.

Here is my code:

index.js

import myHistory from './utils/history';

import { Router } from 'react-router';

ReactDOM.render(
   <Provider store={store}>
      <Router history={myHistory}>
         <App />
      </Router>
   </Provider>,
   document.getElementById('root')
);

App.js

import React from 'react';

import MainNavigation from './components/navigations/MainNavigation';
import Routes from './routes/Routes';

const App = () => {
   return (
      <>
         <MainNavigation />
         <Routes />
      </>
   );
};

export default App;

MainNavigation.js

import React from 'react';
import { Link } from 'react-router-dom';

const MainNavigation = () => {
   return (
      <>
         <nav className='navigation'>
            <ul>
               <li>
                  <Link to='/'>Home</Link>
               </li>
               <li>
                  <Link to='/contact'>Contact</Link>
               </li>

               <li>
                  <Link to='/about'>A propos</Link>
               </li>

               <li>
                  <Link to='/user-profile'>Votre compte</Link>
               </li>
            </ul>
         </nav>
      </>
   );
};

export default MainNavigation;

Routes.js

//** Import routers */
import {Route, Routes as Routing } from 'react-router-dom';

const Routes = () => {
   return (
      <Routing>
         <Route path='/' element={<Home />} />
         <Route path='/about' element={<About />} />
         <Route path='/contact' element={<ContactForm />} />
         <Route path='/user-profile' element={<UserAccount />} />
      </Routing>
   );
};

export default Routes;

I really can't figure out why I got the error message Cannot read properties of undefined (reading 'pathname'). It's working when I swap to BrowserRouter instead of Router but then I can't use history ('navigate' now in v6) in my app.

Thank you.

Emanuel Necula · Accepted Answer · 2021-11-11 05:32:23Z

0

Your Router needs a location too (e.g. <Router location={myHistory.location} history={myHistory}>).

edited Nov 11, 2021 at 5:32

answered Nov 11, 2021 at 5:19

Emanuel Necula

11 bronze badge

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

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Simon Over a year ago

Hello @Emanuel, thank you for your answer. When I add a location to my router I have this error Cannot read properties of undefined (reading 'createHref')

Nate Osterfeld · Accepted Answer · 2022-03-27 18:17:13Z

0

You need to use unstable_HistoryRouter now

import { createBrowserHistory } from 'history';
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';

let history = createBrowserHistory();

function App() {
  return (
    <HistoryRouter history={history}>
      // The rest of your app
    </HistoryRouter>
  );
}

history.push("/foo");

answered Mar 27, 2022 at 18:17

Nate Osterfeld

996 bronze badges

Collectives™ on Stack Overflow

React-router v6: 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