Node.js 错误:根路由必须重新呈现单个元素

Node.js 错误:根路由必须重新呈现单个元素,node.js,reactjs,Node.js,Reactjs,我是个新手,我正在尝试使用一个简单的教程来登录和注册。当前服务器已启动,但在浏览器中我收到以下错误和警告: 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

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

    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
};

发生此错误的原因是webpack不支持es6模块。因为您使用的是babel来传输es6代码,所以请使用“.default”关键字

import Base from './components/Base.jsx'.default;
我不能相信这个答案,但我也有同样的问题,并发现:

h/t:

可能重复的
 {
  "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"
  }
}
import Base from './components/Base.jsx'.default;