エラー：ルートルートは1つの要素をレンダリングする必要がありますRe

Question

私はまったく新しいものです。ログインとサインアップのための簡単なチュートリアルを使用しようとしています。現在、サーバが起動しているが、ブラウザでは、私はfollwing errosと警告が出ます：

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：

​​

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; 

パッケージの

多分1つは非推奨ですが、私はそのことについて確認してくださいナット午前： package.json：WebPACKのはES6モジュールをサポートしていないため

{ 
    "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" 
    } 
} 

Answer 1

このエラーが発生します。 es6コードを翻訳するためにbabelを使用しているので、 '.default'キーワードを使用してください。 https://stackoverflow.com/a/36198146/6088475

H/T：ルートルートの必要があります。[不変違反の@Manas