create-react-app + redux 出错， 但是我检查了好多遍都找不到，请大家帮帮忙，不知道是不是版本都问题？

Question

题目描述

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at index.js:26.

题目来源及自己的思路

相同的代码，放到另一个不是create-react-app创建都案例里就可以，这个就不行，不知道是不是版本的问题，我找了好几天都找不到，请大家帮帮忙。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

// 根组件 index.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {ConnectedRouter} from 'react-router-redux'
import {Provider} from 'react-redux'
import {Route} from 'react-router'
import configureStore, {history} from './reduxes/configureStore'

import Home from './components/home/Home'

const store = configureStore()

export default class App extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <Home />
        )
    }
}

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <Route path="/" component={App} />
        </ConnectedRouter>
    </Provider>,
    document.getElementById('root')
)

// reduxer/reducer.js

import photos from '../components/home/HomeRedux'

export default {
    photos
}

// reduxes/configureStore.js

import {createStore, applyMiddleware, combineReducers, compose} from 'redux'
import {routerReducer, routerMiddleware} from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'
import thunk from 'redux-thunk'

import reducers from './reducer'

const rootReducer = combineReducers({
    ...reducers,
    router: routerReducer // 路由也由redux来管理
})

const history = createHistory()
export {history}

const routerML = routerMiddleware(history)


export default function configureStore() {
    if (process.env.NODE_ENV === 'production') {
        return createStore(
            rootReducer,
            compose(
                applyMiddleware(thunk, routerML)
            )
        )
    } else {
        return createStore(
            rootReducer,
            compose(
                applyMiddleware(thunk, routerML),
                window.devToolsExtension ? window.devToolsExtension() : f => f
            )
        )
    }
}

// components/home/Home.js

import React, { Component } from 'react'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'

import * as actions from './HomeRedux'

class Home extends Component {
    constructor(props) {
        super(props)
    }
    
    render() {
        console.log(this.props);
        
        return (
            <div>Home</div>
        )
    }
}

export default connect(
    state => {
        let {photos: {imgData, curPhoto}} = state

        return {
            imgData,
            curPhoto
        }
    },
    dispatch => bindActionCreators({...actions}, dispatch)
)(Home)

// components/home/HomeRedux.js

let imgData = []

let initialState = {
    imgData: [],
    curPhoto: {
        id: '',
        src: ''
    }
}

const LOAD_IMAGE = 'label-case/Photogallery/LOAD_IMAGE'

export const loadImage = () => (dispatch, getState) => {
    let {curPhoto} = getState().photos
    
    dispatch({
        type: LOAD_IMAGE,
        imgData
    })
}

export default function photos(state = initialState, action) {
    let {
        type,
        imgData,
        photo
    } = action

    switch (type) {
        case LOAD_IMAGE:
            return {...state, imgData}
            break
        default:
            return state
    }
}

你期待的结果是什么？实际看到的错误信息又是什么？

就是希望能在Home.js 组件中输出redux返回都数据，

这里是demo都相关代码： https://pan.baidu.com/s/1lvk1...
恳请朋友们帮帮忙，谢谢

Answer 1

安装的react-router-redux默认是到@4.0.8,当使用ConnectedRouter组件包裹app时，会报错说引入的不是组件/string(type is invalid).这是因为该版本不能和react-router4协作

解决办法：npm install react-router-redux@next 进行升级

具体参考：https://github.com/ReactTrain...

Answer 2

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
)

个人在根组件中去掉ConnectedRouter就好了，不过为啥别的案例里有这个也可以