React项目withRouter导入失败及Redux集成问题求助

问题说明 #

集成react-router-dom与Redux时，因react-router-dom v6移除了withRouter API，导入时报错；自行实现withRouter后仍存在运行错误，相关错误截图及项目代码如下：

• 当前运行错误截图：
• withRouter导入错误截图：

项目代码 #

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router} from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.Fragment>
    <Router>
      <App />
    </Router>
  </React.Fragment>
);

reportWebVitals();

App.js #

import './App.css';
import Main from './components/MainComponent';
import React,{ Component } from 'react';
import { Provider } from 'react-redux'
import { ConfigureStore } from './redux/configurStore'

const store= ConfigureStore()

class App extends Component {
  render(){
    return (
      <Provider store={store}>
        <div className="App">
          <Main />
        </div>
      </Provider>
    );
  }
}

export default App;

reducer.js #

import { DISHES } from "../shared/dishes"
import { COMMENTS } from '../shared/comments';
import { PROMOTIONS } from '../shared/promotiones';
import { LEADERS } from '../shared/leaders'

export const initialState = {
    dishes: DISHES,
    comments: COMMENTS,
    promotions: PROMOTIONS,
    leaders: LEADERS
};

export const Reducer = (state = initialState, action) => {
    return state ;
};

configurStore.js #

import createStore from 'redux';
import { Reducer, initialState } from './reducer'

export const ConfigureStore = () => {
    const store = createStore(
        Reducer, 
        {},
        initialState
    );

    return store;
}

MainComponent.js #

import { Routes, Route } from "react-router-dom";
import { connect } from 'react-redux';

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      <Component
        {...props}
        location={location}
        params={params}
        navigate={navigate}
      />
    );
  }}

const mapStateToProps = state => {
  return {
    dishes: state.dishes,
    comments: state.comments,
    promotions: state.promotions,
    leaders: state.leaders
  }
}
class Main extends Component {
    constructor(props) {
        super(props);
      }

  render(){
    return null; // 原代码未返回内容，建议补充路由渲染逻辑
    }
}
export default withRouter(connect(mapStateToProps)(Main));

解决步骤 #

1. 修复自定义withRouter实现 #

当前实现存在三个问题：未导入路由Hook、外层函数未返回包装组件、高阶组件包裹顺序错误，修改后的MainComponent.js如下：

// 补充导入路由Hook
import { Routes, Route, useLocation, useNavigate, useParams } from "react-router-dom";
import { connect } from 'react-redux';

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    return (
      <Component
        {...props}
        location={location}
        params={params}
        navigate={navigate}
      />
    );
  }
  // 返回包装后的组件
  return ComponentWithRouterProp;
}

const mapStateToProps = state => {
  return {
    dishes: state.dishes,
    comments: state.comments,
    promotions: state.promotions,
    leaders: state.leaders
  }
}

class Main extends Component {
    constructor(props) {
        super(props);
      }

  render(){
    // 补充路由渲染逻辑示例
    return (
      <Routes>
        {/* 可添加具体路由配置，比如：
        <Route path="/" element={<Home />} />
        */}
      </Routes>
    );
    }
}

// 调整顺序：先包装withRouter，再连接Redux
export default connect(mapStateToProps)(withRouter(Main));

2. 修复Redux Store配置错误 #

configurStore.js存在导入错误和参数传递错误，修改后如下：

// 改为命名导入createStore
import { createStore } from 'redux';
import { Reducer, initialState } from './reducer'

export const ConfigureStore = () => {
    // 正确传递预加载状态作为第二个参数
    const store = createStore(
        Reducer, 
        initialState
    );

    return store;
}

3. 可选优化：转为函数组件 #

推荐将Main改为函数组件，直接使用Hook无需自定义withRouter：

import { Routes, Route, useLocation, useNavigate, useParams } from "react-router-dom";
import { useSelector } from 'react-redux';

function Main() {
  // 直接用Redux Hook获取状态
  const dishes = useSelector(state => state.dishes);
  const comments = useSelector(state => state.comments);
  const promotions = useSelector(state => state.promotions);
  const leaders = useSelector(state => state.leaders);

  // 直接用路由Hook
  const location = useLocation();
  const navigate = useNavigate();
  const params = useParams();

  return (
    <Routes>
      {/* 路由配置 */}
    </Routes>
  );
}

export default Main;

内容的提问来源于stack exchange，提问作者Jo Classy