Cannot read properties of undefined (reading 'pathname')

[reZach]

Hello, thank you for this repo! I was directed here based on your comment of using redux-first-history instead of connected-react-router. I wanted to ask, because I feel like I'm following your instructions properly, but I'm running into a strange error. Here is what I have. Everything is pretty much boilerplate from what's in the README:

store.js (with @reduxjs/toolkit)

import { combineReducers } from "redux";
import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import { createHashHistory, createBrowserHistory } from "history";
import { createReduxHistoryContext } from "redux-first-history";

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

export const store = configureStore({
  reducer: combineReducers({
    router: routerReducer
  }),
  middleware: [...getDefaultMiddleware({
    serializableCheck: false
  }), routerMiddleware]
});

export const history = createReduxHistory(store);

app.js (react-router v6)

import React from "react";
import { HistoryRouter } from "redux-first-history/rr6";
import { Provider } from "react-redux";
import AppRoutes from "Core/routes";
import Nav from "./nav";
import "./root.css";

class Root extends React.Component {
  render() {
    const { store, history } = this.props;
    
    return (
      <React.Fragment>
        <Provider store={store}>
          <HistoryRouter history={history}>
            <Nav history={history}></Nav>
            <AppRoutes></AppRoutes>
          </HistoryRouter>
        </Provider>
      </React.Fragment>
    );
  }
}

export default Root;

routes.jsx

import React from "react";
import { Routes, Route } from "react-router";
import ROUTES from "Constants/routes";
import loadable from "@loadable/component";

// Load bundles asynchronously so that the initial render happens faster
const Welcome = loadable(() =>
  import(/* webpackChunkName: "WelcomeChunk" */ "Pages/welcome/welcome")
);
const About = loadable(() =>
  import(/* webpackChunkName: "AboutChunk" */ "Pages/about/about")
);

class AppRoutes extends React.Component {
  render() {    
    return (
      <Routes>
        <Route path={ROUTES.WELCOME} element={<Welcome />}></Route>
        <Route path={ROUTES.ABOUT} element={<About />}></Route>        
      </Routes>
    );
  }
}

export default AppRoutes;

welcome.jsx

import React from "react";
import ROUTES from "Constants/routes";
import { Link } from "react-router-dom";

class Welcome extends React.Component {
  render() {
    return (
      <React.Fragment>
        <section className="section">
          <div className="container">
            <h2 className="title is-2">Samples</h2>
            <div>
              <Link to={ROUTES.ABOUT}>About page</Link> <br />
            </div>
          </div>
        </section>
      </React.Fragment>
    );
  }
}

export default Welcome;

about.jsx

import React from "react";

class About extends React.Component {
  render() {
    return (
      <section className="section">
          <div className="container">
              <h1 className="title is-1">About</h1>
          </div>          
      </section>
    );
  }
}

export default About;

My app loads fine, but as soon as I try to navigate to another page I get this error Cannot read properties of undefined (reading 'pathname'). I can't figure out if this is an error in redux-first-history or somewhere else. This comment makes me feel like <HistoryRouter> needs to support something like this (but I'm not entirely sure).

<HistoryRouter location={history.location} navigator={history}>

Can you point me in the right direction?

repro steps

I made a small POC repo where this can be replicated
https://github.com/reZach/react-router-v6-upgrade

[salvoravida]

Hi there @reZach

1.) remove "connected-react-router": "^6.9.2",
2.) delete package-lock.json and recreate it, as it is corrupted with both history 4.x/5.x packages

lmk!

[reZach]

Thanks @salvoravida , I tried these suggestions (and updated that repo) yet I still see the same issue. Do you have another suggestion?

[reZach]

@salvoravida, npm i history needed to be ran such that history existed and was version 5, due to your comment here which requires a version of history of 5 to be present if react-router version 6 is present. Doing so fixed the issue!

[salvoravida]

no you do not need to install history5, it is already a dep of react-router v6.

Anyway your project is corrupted. Here is a test project with your code, that works.

https://codesandbox.io/s/rfh-issue-test-ephnte

Best regards.

[Kost927]

Also had such a problem. Tried with history 4.10.* and history 5.3.0. And tried to remove history dep from the project. Worked solution for me is to install history 5.0.0.