Question

我是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;

也许其中一个软件包已弃用但我对此非常肯定：的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"
  }
}

Answer 1

发生此错误是因为webpack不支持es6模块。由于您使用babel来转换es6代码，因此请使用＆＃39; .default＆＃39;关键字。

mutate(ind = 1:5) %>%
    mutate(Pred = map2_dbl(model, ind, ~predict(.x, newdata = data.frame(ind = .y) )))

# A tibble: 5 x 5
  groups         the_data    model   ind       Pred
  <fctr>           <list>   <list> <int>      <dbl>
1      A <tibble [5 x 2]> <S3: lm>     1 -0.4822045
2      B <tibble [5 x 2]> <S3: lm>     2 -0.1357712
3      C <tibble [5 x 2]> <S3: lm>     3 -0.2455760
4      D <tibble [5 x 2]> <S3: lm>     4  0.4818425
5      E <tibble [5 x 2]> <S3: lm>     5 -0.3473236

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

h / t：@Manas

错误：根路由必须呈现单个元素Re

1 个答案: