获取异步组件时 React 路由器抛出错误

Question

我正在使用 react、redux 和 react router 等来构建和示例应用程序。

我正在尝试异步加载应用程序的不同部分。我将我的应用程序分成了鸭子，我正在按照这个例子 https://github.com/insin/react-examples/tree/master/code-splitting-redux-reducers

但是我收到这个错误：

Uncaught Invariant Violation: The root route must render a single element

当尝试使用 React 路由器的 getComponent 方法获取异步组件时。我在用着：反应路由器 2.0.1

我的路线：

export default function configureRoutes(reducerRegistry) {
  return(
    <Route>
      <Route component={Landing}>
        <Route path='/login' component={Login}/>
        <Route path='/register' component={Register}/>
      </Route>
            <Route path="admin" getComponent={(location, cb) => {
                require.ensure([], require => {
                    cb(null, require('./containers/admin'))
                })
            }}/>
      <Route component={App}>
        <Route  path='/' component={Home} />
      </Route>
    </Route>
)}

我的组件

class Admin extends Component {
  componentDidMount() {
    this.props.load()  
  }
  render() {
    const { message, isFetching } = this.props
    return (
      <div>
        <p>{message}</p> 
        <p>This module was loaded via chunk </p>
        {loading && <p>Doing some fake loading ...</p>}
      </div>
    )  
  }  
}

Admin.propTypes = {
  message: PropTypes.string.isRequired,
  isFetching: PropTypes.bool.isRequired,
  load: PropTypes.string.isRequired
}

const mapStateToProps = state => state.admin

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

export default connect(mapStateToProps, mapDispatchToProps)(Admin)

有没有人有同样的错误？有任何想法吗？有人有类似的工作吗？

感谢社区！

更新：为清楚起见添加了index.js

import configureRoutes from './routes'
import configureStore from './store/configureStore'
import coreReducers from './modules/core'
import ReducerRegistry from './reducer-registry'

var reducerRegistry = new ReducerRegistry(coreReducers)

// Configure hot module replacement for core reducers
if (process.env.NODE_ENV !== 'production') {
  if (module.hot) {
    module.hot.accept('./modules/core', () => {
      var nextCoreReducers = require('./modules/core')
      reducerRegistry.register(nextCoreReducers)
    })
  }
}

const routes = configureRoutes(reducerRegistry)
const store = configureStore(reducerRegistry)

render(
  <I18nextProvider i18n={i18n}>
    <Provider store={store}>
      <Router history={browserHistory} routes={routes} />
    </Provider>
  </I18nextProvider>,
  document.getElementById('root')
)

Answer 1

我认为您的根 <Route> 缺少 component 字段。

您需要为每个父路由指定 component 或 getComponent，因为这将是当前子路由组件作为 this.props.children 传递给的组件。

而不是

export default function configureRoutes(reducerRegistry) {
  return (
    <Route>

你想要

export default function configureRoutes(reducerRegistry) {
  return (
    <Route component={App}>

在这种情况下，您可能不需要下面的另一条 App 路线。

获取异步组件时 React 路由器抛出错误

React router throws and error when getting async component

react-router

redux