錯誤：根路由必須呈現單個元素Re

我是全新的React，我嘗試使用簡單的教程進行登錄和註冊。目前服務器已啓動，但在瀏覽器中我得到的follwing的錯誤及警告：錯誤：根路由必須呈現單個元素Re

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;

也許一個程序包已經過時，但我肯定螺母有關：的package.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" 
    } 
}

來源

2017-04-24 Matan Tubul

[不變違規可能重複：根路由必須在react-router 2動態路由中渲染單個元素錯誤（http://stackoverflow.com/questions/36194806/invariant-violation-the-root-route-must-render-a-single-element-error-in-反應） – Chris

這個錯誤是因爲的WebPack不支持ES6模塊。由於您使用babel來轉儲es6代碼，因此請使用'.default'關鍵字。

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

我不能邀功這個答案，但有同樣的問題，發現這個：https://stackoverflow.com/a/36198146/6088475

H/T：@Manas

來源

2017-06-23 00:01:32

錯誤：根路由必須呈現單個元素Re

回答

相關問題