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

Posted 2023-02-22

【中文标题】从 v3 迁移到 v4 react-router 时出现错误

【英文标题】：Getting an error when migrating from v3 to 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

【参考方案1】：

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