Invariant Violation: the root route must render a single element error in react-router 2 动态路由

Question

我有一个简单的 Hello World 应用程序，只有一条路线，没有子路线或索引路线。对于路由，我使用 plain routes instead of jsx sysntax. Again i am using react-router's dynamic routing 通过 webpack 加载 Hello 组件。我的 app.jsx 文件具有以下代码.

import React from "react";
import ReactDOM from "react-dom";
import {Router, browserHistory} from "react-router";
import Hello from "./components/Hello";



const routes = [{
    path:"/",
    getComponents(location, callback) {
        require.ensure([], function (require) {
            callback(null, require('./components/Hello'))
        })
    }
}];


ReactDOM.render(
    <Router history={browserHistory}  routes={routes}/>,
    document.getElementById("container")
);

Hello.jsx组件有如下代码

import React from "react";
export default class Hello extends React.Component {

    render() {

        return (
            <h2>Hello World</h2>
        )
    }
}

Answer 1

出现这个错误是因为 webpack 不支持 es6 模块

如果你使用 babel 转译 es6 代码，那么使用默认关键字 like

require('./components/Hello').default

因此路线将是

const routes = [{
    path:"/",
    getComponents(location, callback) {
        require.ensure([], function (require) {
            callback(null, require('./components/Hello').default)
        })
    }
}];

Invariant Violation: the root route must render a single element error in react-router 2 动态路由

Invariant Violation: The root route must render a single element error in react-router 2 dynamic routing

reactjs

webpack

react-router

react-router-component