CODEWITHSUNDEEP
reactjsreact-router
reZach
reZach

Reputation: 9429

Cannot read properties of undefined (reading 'pathname')

(I've reviewed other similar SO posts and haven't found an adequate solution. I have a simple/minimal Github POC of this issue at the bottom of my question).

My project has moved from connected-react-router to redux-first-history as connected-react-router doesn't have support for react-router (v6). 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).

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

repro steps

https://github.com/reZach/react-router-v6-upgrade

Upvotes: 0

Views: 2279

Answers (1)

reZach
reZach

Reputation: 9429

Thanks to @Phil, npm i history needed to be ran to install a v5 version of history needed to be present to be used with react-router v6. Comment here.

Upvotes: 2

Related Questions