（我已查看其他类似的 SO 帖子，但未找到合适的解决方案。我在问题的底部提供了该问题的简单/最小 Github POC）。

我的项目已从 connected-react-router 移至 redux-first-history ，因为 connected-react-router 不支持 react-router (v6) 。我的应用程序加载正常，但当我尝试导航到另一个页面时，我收到此错误 无法读取未定义的属性（读取“路径名”） 。我无法确定这是 redux-first-history 中的错误还是其他地方的错误。 此评论 让我觉得 <HistoryRouter> 需要支持类似的东西（但我不太确定）。

store.js (使用 @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步骤

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