使用Babel

Question

我已经基于this tutorial创建了一个通用的React应用程序但是我得到了

'Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).'

Chrome开发工具中的

。查看已编译的代码，我可以看到一个未定义的对象 - _reactRouter2.default。从表面上看，一切似乎都正常，我可以在页面之间导航，我可以使用浏览器中的后退按钮，但我不明白这个错误。任何人都可以解释我如何解决它吗？

以下是显示_reactRouter2.default如何构建且未定义的屏幕截图。

以下是一些相关的代码段：

src/routes.js

import React from 'react';
import { Route } from 'react-router';

import Main from './components/Main.js';
import Login from './components/Login.js';
import ListsOverview from './components/ListsOverview.js';

export default (
  <Route path="/" component={Main}>
    <Route path="/login" component={Login} />
    <Route path="/overview" component={ListsOverview} />
  </Route>
);

src/application.js

import React from 'react';
import ReactDOM from 'react-dom';
import Router from 'react-router';
import Routes from './routes';

import { createHistory } from 'history'

const history = createHistory()

var app = document.getElementById('app');

ReactDOM.render(<Router history={history} routes={Routes} />, app);

server.js

import React from 'react';
import { match, RouterContext } from 'react-router';
import ReactDOMServer from 'react-dom/server';
import Express from 'express';
import http from 'http';
import Routes from './src/routes';
import Webpack from 'webpack';
import WebpackMiddleware from 'webpack-dev-middleware';
import DefaultConfig from './webpack/default.config.js';
import DevConfig from './webpack/development.config.js';

let app = Express();
let port = process.env.PORT || DefaultConfig.Port;
const isDevelopment = process.env.NODE_ENV !== 'production';
const isProduction = process.env.NODE_ENV === 'production';

app.engine('ejs', require('ejs').__express);
app.set('view engine', 'ejs');
app.use(Express.static(DefaultConfig.Dist));

if (isDevelopment) {
  const compiler = Webpack(DevConfig);
  app.use(WebpackMiddleware(compiler, {
    publicPath: DevConfig.output.publicPath,
    noInfo: true
  }));
}

if (isProduction) {
  app.set('views', DefaultConfig.Dist);
}

app.use((req, res) => {
  match({ routes: Routes, location: req.url }, (error, redirectLocation, renderProps) => {
    if (error) {
      res.status(500).send(error.message);
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search);
    } else if (renderProps) {
      res.render('index', {
        isDevelopment: isDevelopment,
        app: ReactDOMServer.renderToString(<RouterContext {...renderProps} />)
      });
    } else {
      res.status(404).send('Not found');
    }
  })
});

http.createServer(app).listen(port, function() {
  console.log('Express server listening on port ' + port);
});

package.json

{
  "name": "packed-it",
  "version": "1.0.0",
  "description": "Application for managing packing lists",
  "scripts": {
    "start": "nodemon --exec babel-node -- server.js",
    "build": "rimraf dist && NODE_ENV=production webpack --config ./webpack/production.config.js --progress --profile --colors",
    "production": "NODE_ENV=production npm start"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/stuartleyland/packed-it.git"
  },
  "author": "Stuart Leyland",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/stuartleyland/packed-it/issues"
  },
  "homepage": "https://github.com/stuartleyland/packed-it#readme",
  "dependencies": {
    "ejs": "^2.4.2",
    "express": "^4.13.3",
    "history": "^3.0.0",
    "moment": "^2.13.0",
    "nodemon": "^1.9.2",
    "react": "^15.0.2",
    "react-dom": "^15.0.2",
    "react-router": "^2.4.0"
  },
  "devDependencies": {
    "babel-cli": "^6.9.0",
    "babel-core": "^6.8.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-syntax-jsx": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.5.0",
    "html-webpack-plugin": "^2.19.0",
    "node-jsx": "^0.13.3",
    "npm-watch": "^0.1.4",
    "react-hot-loader": "^1.3.0",
    "rimraf": "^2.5.2",
    "webpack": "^1.13.0",
    "webpack-dev-middleware": "^1.6.1"
  }
}

如果我遗漏了任何相关内容，this Github repository中的所有代码都可用。

Answer 1

可能会发生这种情况，因为您没有正确导入路由器。

此

的src / application.js中

import Router from 'react-router';

应该是

import { Router } from 'react-router'

React Router Documentation