{ "name": "shopping-cart-app","version": "1.0.0","description": "","main": "index.js","scripts": { "test": "karma start","start": "node server.js" },"author": "","license": "MIT","dependencies": { "axios": "^0.9.1","babel-plugin-transform-object-rest-spread": "^6.23.0","body-parser": "^1.17.1","express": "^4.13.4","faker": "^4.1.0","marked": "^0.3.6","mongoose": "^4.9.6","nodemon": "^1.11.0","react": "^0.14.7","react-addons-test-utils": "^0.14.7","react-bootstrap": "^0.31.0","react-dom": "^0.14.7","react-router": "^2.0.0" },"devDependencies": { "babel-core": "^6.5.1","babel-loader": "^6.2.2","babel-preset-es2015": "^6.5.0","babel-preset-react": "^6.5.0","babel-preset-stage-0": "^6.5.0","css-loader": "^0.23.1","expect": "^1.14.0","foundation-sites": "6.2.0","jquery": "^2.2.1","karma": "^0.13.22","karma-chrome-launcher": "^0.2.2","karma-mocha": "^0.2.2","karma-mocha-reporter": "^2.0.0","karma-sourcemap-loader": "^0.3.7","karma-webpack": "^1.7.0","mocha": "^2.4.5","node-sass": "^3.4.2","sass-loader": "^3.1.2","script-loader": "^0.6.1","style-loader": "^0.13.0","webpack": "^1.12.13" } }
我正在尝试为我正在处理的反应应用程序实现服务器端路由.我正在使用react-router用于此目的.这是我的server.js代码的一部分
const renderToString = require ('react-dom/server'); let match,RouterContext = require('react-router'); const routes = require ('/app/router'); const React = require('react'); app.get('*',(req,res) => { match( { routes,location: req.url },(err,redirectLocation,renderProps) => { // in case of error display the error message if (err) { return res.status(500).send(err.message); } // in case of redirect propagate the redirect to the browser if (redirectLocation) { return res.redirect(302,redirectLocation.pathname + redirectLocation.search); } // generate the React markup for the current route let markup; if (renderProps) { // if the current route matched we have renderProps markup = renderToString(<RouterContext {...renderProps}/>); } else { // otherwise we can render a 404 page markup = renderToString(<NotFoundPage/>); res.status(404); } // render the index template with the embedded React markup return res.render('index',{ markup }); } ); }); //my webpack config file var webpack = require('webpack'); var path = require('path'); module.exports = { entry: [ 'script!jquery/dist/jquery.min.js','script!foundation-sites/dist/foundation.min.js','./app/app.jsx' ],externals: { jquery: 'jQuery' },plugins: [ new webpack.ProvidePlugin({ '$': 'jquery','jQuery': 'jquery' }) ],output: { path: __dirname,filename: './public/bundle.js' },resolve: { root: __dirname,modulesDirectories: [ 'node_modules','./app/components' ],extensions: ['','.js','.jsx'] },module: { loaders: [ { loader: 'babel-loader',query: { presets: ['react','es2015','stage-0'] },test: /\.jsx?$/,exclude: /(node_modules|bower_components)/ } ] },sassLoader: { includePaths: [ path.resolve(__dirname,'./node_modules/foundation-sites/scss') ] },devtool: 'cheap-module-eval-source-map' };
我得到了一个意外的令牌< at< RouterContext {... renderProps} />.
我已经查看了教程,我正在工作,但我不太确定我做错了什么.任何建议都会非常感激
解决方法
您使用的是Babel预设
react,es2015和
stage-0.
这些预设中没有一个包含您使用object spread syntax所需的插件 – 这部分代码:
<RouterContext {...renderProps} />
您可以通过将transform-object-rest-spread插件添加到您的Babel配置来解决您的问题,如下所示:
module: { loaders: [ { loader: 'babel-loader',query: { presets: ['react','stage-0'],plugins: ['transform-object-rest-spread'] },exclude: /(node_modules|bower_components)/ } ] }
不要忘记使用安装插件
npm install --save-dev babel-plugin-transform-object-rest-spread