gpt4 book ai didi

javascript - reactRouter2.default 使用 Babel 未定义

转载 作者:行者123 更新时间:2023-11-30 07:34:48 24 4
gpt4 key购买 nike

我已经基于 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 开发工具中。查看编译后的代码,我可以看到一个 undefined object - _reactRouter2.default。表面上一切似乎都正常,我可以在页面之间导航,我可以使用浏览器中的后退按钮,但我不明白那个错误。任何人都可以阐明我如何修复它吗?

这是一个屏幕截图,显示了 _reactRouter2.default 是如何构建的,并且它是未定义的。 Screenshot of router construction

以下是一些相关的代码片段:

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 中可用以防我错过任何相关内容。

最佳答案

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

这个

src/application.js

import Router from 'react-router';

应该是

import { Router } from 'react-router'

React Router Documentation

关于javascript - reactRouter2.default 使用 Babel 未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37603414/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com