配置Redux History实现跳转遇错：React.createElement类型无效

看起来你遇到的这个React.createElement: type is invalid错误，在配置react-router-redux实现路由跳转时非常常见，大概率是依赖配置、组件导入或者路由包裹的问题，我来帮你一步步排查解决：

一、先确认依赖版本与安装 #

首先要确保你安装的依赖版本相互兼容，react-router-redux需要和react-router、redux、react-redux的版本匹配。先执行以下命令重新安装依赖（避免版本冲突）：

npm uninstall react-router-redux react-router-dom redux react-redux
npm install react-router-redux@5.0.0-alpha.9 react-router-dom@5.2.0 redux@4.0.5 react-redux@7.2.3

注：这里指定的是经过验证的兼容版本，如果你想用更高版本，需要确认官方文档的版本适配说明。

二、检查Store的正确配置 #

你的Redux Store必须添加routerMiddleware，并且合并routerReducer，否则push等路由action无法被正确处理：

1. 配置Store文件（比如src/store.js） #

import { createStore, applyMiddleware, compose } from 'redux';
import { routerMiddleware, routerReducer } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import { combineReducers } from 'redux';
import rootReducer from './reducers';

// 创建history实例
const history = createBrowserHistory();

// 生成路由middleware
const routingMiddleware = routerMiddleware(history);

// 组合middleware
const middleware = [routingMiddleware];

// 创建Store
const store = createStore(
  combineReducers({
    ...rootReducer,
    router: routerReducer // 必须合并routerReducer
  }),
  compose(
    applyMiddleware(...middleware),
    // 开启Redux DevTools（可选）
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export { store, history };

2. 根Reducer文件（比如src/reducers/index.js） #

确保你合并了自己的业务reducer：

import { combineReducers } from 'redux';
import yourReducer from './yourReducer'; // 替换成你的业务reducer

export default combineReducers({
  yourReducer
});

三、正确包裹路由组件 #

在根组件中，必须用Provider包裹ConnectedRouter，并且传入正确的history和store：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { Route, Switch } from 'react-router-dom';
import { store, history } from './store';
import Home from './components/Home';
import OtherPage from './components/OtherPage';

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/other" component={OtherPage} />
      </Switch>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

这里容易出错的点：如果ConnectedRouter没有被Provider包裹，或者history没有正确传入，就会导致路由组件无法被正确识别，触发你遇到的类型错误。

四、在组件/Action中正确使用push跳转 #

1. 在组件中使用 #

通过connect把push方法映射到组件props：

import React from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';

class YourComponent extends React.Component {
  handleGoHome = () => {
    // 调用push跳转
    this.props.push('/');
  };

  render() {
    return (
      <button onClick={this.handleGoHome}>
        返回首页
      </button>
    );
  }
}

// 把push方法映射到props
export default connect(null, { push })(YourComponent);

2. 在Action中使用 #

直接返回push action，或者结合redux-thunk做异步跳转：

import { push } from 'react-router-redux';

// 同步跳转Action
export const goHome = () => push('/');

// 异步跳转Action（需要安装redux-thunk）
export const goHomeAfterAsync = () => dispatch => {
  // 模拟异步操作
  setTimeout(() => {
    dispatch(push('/'));
  }, 1000);
};

最后排查要点 #

如果以上配置都做了还是报错，你可以检查：

• 是否所有相关的组件/方法都正确导入，有没有拼写错误（比如把ConnectedRouter写成ConnectRouter）
• 有没有在路由配置中使用了未定义的组件（比如导入路径错误，导致组件是undefined）
• 确认你的react-router-redux版本是否对应了正确的导入方式（比如某些版本的ConnectedRouter可能从其他路径导入）

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