reactRouter2.default使用Babel未定义

我已经创build了一个基于本教程的通用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 。 表面上看起来一切正常，我可以在页面之间导航，我可以在浏览器中使用后退button，但是我不明白那个错误。 任何人都可以阐明我如何解决它？

这里是一个屏幕截图，展示了如何构造_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://[e-mail]/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" } } 

所有的代码都可以在这个Github仓库中使用，以防我错过了任何相关的东西。

Answer 1

这可能是因为您没有正确导入路由器 。

这个

SRC / application.js中

 import Router from 'react-router'; 

应该

 import { Router } from 'react-router' 

React路由器文档