2

我决定使用 react-router v4 而不是 v3 并更改我的路径，以便它们与路由器的 v4 和 redux 一起使用，但我收到以下错误（我使用 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')
)

应用程序.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
4

1 回答 1

1

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

于 2017-05-06T13:16:54.983 回答