ReactJs容器组件连Redux Store报错：BrowserRouter/Route类型异常

你的报错根源主要来自两个方面：React与React-DOM版本不兼容，以及connect包裹组件后丢失路由Props。下面是具体的解决步骤：

1. 修复React版本不匹配问题 #

你的package.json中react版本是16.8.6，但react-dom是16.4.0，这两个库的版本必须保持一致，否则会触发组件渲染相关的奇怪错误（包括你遇到的“元素类型无效”问题）。

修改package.json中的react-dom版本：

"react-dom": "^16.8.6",

然后运行npm install（或yarn install）更新依赖。

2. 用withRouter保留路由Props #

当使用connect包裹组件后，React Router的路由Props（如location、match、history）会被默认屏蔽，而你的MomentumContainer需要访问this.props.location解析URL参数，因此必须用react-router-dom提供的withRouter高阶组件包裹connect后的组件，确保路由Props能正常传递。

首先在MomentumContainer中导入withRouter：

import { withRouter } from 'react-router-dom';

然后修改导出语句，两种connect写法都需要加上withRouter：

写法一（绑定action creators）： #

const actionCreators = { signIn };
export default withRouter(connect(null, actionCreators)(MomentumContainer));

写法二（仅连接Store）： #

export default withRouter(connect()(MomentumContainer));

3. 可选但推荐的优化 #

• 替换废弃的生命周期钩子：componentWillMount已被React官方废弃，建议将这部分逻辑移到componentDidMount中（客户端渲染时执行时机几乎一致，且更安全）：

componentDidMount() {
  // 处理URL参数逻辑
  const query = queryString.parse(this.props.location.search);
  console.log(`query: ${JSON.stringify(query)}`);
  if(query.user_id) {
    console.log(`User logged in w/ id: ${query.user_id}`);
    this.props.signIn(query.user_id); // 若绑定了action creator
    // 或用dispatch：this.props.dispatch(signIn(query.user_id));
  }

  // 处理API请求
  const dev = process.env.REACT_APP_DEV_SERVER_ENDPOINT;
  const prod = process.env.REACT_APP_PROD_SERVER_ENDPOINT;
  const base_endpoint = process.env.REACT_APP_DEV_MODE ? dev : prod;
  const api_endpoint = `${base_endpoint}momentum`;

  axios.get(api_endpoint)
    .then(response => this.setState({display: response.data}))
    .catch(err => console.error('获取数据失败:', err));
}

• 优化Store创建逻辑：当前dev模式的compose顺序存在潜在问题，且未处理devTools不存在的场景，改成更健壮的写法：

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const middleware = applyMiddleware(promise, thunk, logger);

let store;
if (dev_mode === true) {
  console.log('App starting in development mode.');
  store = createStore(reducers, {}, composeEnhancers(middleware));
} else {
  console.log('App starting in production mode');
  store = createStore(reducers, {}, middleware);
}

按照以上步骤修改后，你的connect使用问题和路由相关报错应该就能解决了。

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