错误：根路由必须渲染单个元素 Re答案

【问题标题】：Error: The root route must render a single element Re错误：根路由必须渲染单个元素 Re
【发布时间】：2017-09-20 20:45:04
【问题描述】：

我是 React 的新手，我正在尝试使用简单的教程进行登录和注册。当前服务器已启动，但在浏览器中我收到以下错误和警告：

    Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
Warning: RouterContext: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.
 Uncaught Error: The root route must render a single element
at invariant (app.js:1431)
at Object.render (app.js:9338)
at app.js:31715
at measureLifeCyclePerf (app.js:30994)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (app.js:31714)
at ReactCompositeComponentWrapper._renderValidatedComponent (app.js:31741)
at ReactCompositeComponentWrapper.performInitialMount (app.js:31281)
at ReactCompositeComponentWrapper.mountComponent (app.js:31177)
at Object.mountComponent (app.js:4009)
at ReactCompositeComponentWrapper.performInitialMount (app.js:31290)

我不确定是什么问题， route.js：

    /**
 * Created by matant on 23/04/17.
 */
import Base from './components/Base.jsx';
import HomePage from './components/HomePage.jsx';
import LoginPage from './containers/LoginPage.jsx';
import SignUpPage from './containers/SignUpPage.jsx';


const routes = {
    // base component (wrapper for the whole application).
    component: Base,
    childRoutes: [

        {
            path: '/',
            component: HomePage
        },

        {
            path: '/login',
            component: LoginPage
        },

        {
            path: '/signup',
            component: SignUpPage
        }

    ]
};

export default routes;

Base.jsx：

 import React from 'react';
import { Link, IndexLink } from 'react-router';
import PropTypes from 'prop-types';

const Base = ({ children }) => (
    <div>
        <div className="top-bar">
            <div className="top-bar-left">
                <IndexLink to="/">React App</IndexLink>
            </div>

            <div className="top-bar-right">
                <Link to="/login">Log in</Link>
                <Link to="/signup">Sign up</Link>
            </div>

        </div>

        {children}

    </div>
);

Base.propTypes = {
    children: PropTypes.object.isRequired
};

主页：

 import React from 'react';
import { Card, CardTitle } from 'material-ui/Card';


const HomePage = () => (
    <Card className="container">
        <CardTitle title="React Application" subtitle="This is the home page." />
    </Card>
);

export default HomePage;

也许其中一个软件包已被弃用，但我很确定：包.json：

 {
  "name": "grocery",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon --use_strict index.js",
    "bundle": "webpack"
  },
  "author": "matant",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.17.1",
    "create-react-class": "^15.5.2",
    "express": "^4.15.2",
    "material-ui": "^0.17.4",
    "prop-types": "^15.5.8",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router": "^3.0.0",
    "react-tap-event-plugin": "^2.0.1",
    "validator": "^7.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "nodemon": "^1.11.0",
    "webpack": "^2.4.1"
  }
}

【问题讨论】：

Invariant Violation: The root route must render a single element error in react-router 2 dynamic routing的可能重复

标签： node.js reactjs

【解决方案1】：

出现这个错误是因为 webpack 不支持 es6 模块。由于您使用 babel 转译 es6 代码，因此请使用 '.default' 关键字。

import Base from './components/Base.jsx'.default;

我不能把这个答案归功于我，但遇到了同样的问题并发现了这个：https://stackoverflow.com/a/36198146/6088475

h/t：@Manas

【讨论】：