5

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.

Simon
  • 209
  • 4
  • 12

2 Answers2

0

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

Emanuel Necula
  • 1
  • 1
  • 1
    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](/help/how-to-answer). – Community Nov 11 '21 at 07:08
  • 1
    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')``` – Simon Nov 14 '21 at 17:04
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");
Nate Osterfeld
  • 99
  • 6