从 v3 迁移到 v4 react-router 时出现错误答案

【问题标题】：Getting an error when migrating from v3 to v4 react-router从 v3 迁移到 v4 react-router 时出现错误
【发布时间】：2017-10-04 17:20:31
【问题描述】：

我决定使用 react-router v4 而不是 v3 并更改我的路径，以便它们与路由器和 redux 的 v4 一起使用，但我收到以下错误（我使用 export default 导出所有组件并且没有忘记导出任何事物）。我的代码有什么问题？

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。你可能忘记从定义它的文件中导出您的组件。

我试图打开这个 v3 路由器代码，它有效：

<Router history={history}>
  <Route path="/" component={App}>
    <IndexRoute component={UserGrid}></IndexRoute>
    <Route path="/login" component={Login}></Route>
    <Route path="/users/:userId" component={UserPage}></Route>
    <Route path="/registration" component={RegistrationPage}></Route>
    <Route path="/topSecret" component={requireAuth(SecretComponent)}></Route>
  </Route>
</Router>

像这样进入 v4 代码：

const history = createBrowserHistory()

const router = (
  <Provider store={store}>
    <BrowserRouter history={history}>
        <App>
          <Route exact path="/" component={UserGrid}></Route>
          <Route path="/login" component={Login}></Route>
          <Route path="/users/:userId" component={UserPage}></Route>
          <Route path="/registration" component={RegistrationPage}></Route>
          <Route path="/topSecret" component={requireAuth(SecretComponent)}></Route>
        </App>
    </BrowserRouter>
  </Provider>
)

ReactDOM.render(
  router,
  document.getElementById('root')
)

App.js：

class App extends React.Component {
    render() {
        return (
            <div>
                <NavBar />
                {React.cloneElement(this.props.children, this.props)}
            </div>
        )
    }
}

function mapStateToProps (state) {
  return {
    session: state.session,
    users: state.users
  }
}

function mapDispatchToProps (dispatch) {
  return bindActionCreators(actionCreators, dispatch)
}


export default connect(mapStateToProps, mapDispatchToProps)(App)

商店：

import {applyMiddleware, createStore} from 'redux'
import {createLogger} from 'redux-logger'
import { connectRouter, routerMiddleware } from 'connected-react-router'
import thunk from 'redux-thunk'
import { createBrowserHistory } from 'history'
import rootReducer from '../reducers/rootReducer'
import async from '../middlewares/async'
import {authUser} from '../actions/actionCreators'

const history = createBrowserHistory()

const initialState = {
  bla-bla
}

const store = createStore(
  connectRouter(history)(rootReducer),
  initialState,
  applyMiddleware(
    async,
    thunk,
    routerMiddleware(history),
    createLogger()
  )
)

export default store

【问题讨论】：

标签： reactjs redux react-router react-router-redux react-router-dom

【解决方案1】：

我在 App 中删除了 {React.cloneElement(this.props.children, this.props)}（将 props 传递给它的孩子的容器）并用 this.props.children 替换它，并将需要状态的组件单独连接到商店，这解决了我的问题。但我仍然想知道为什么它不适用于{React.cloneElement(this.props.children, this.props)}

【讨论】：