快速服务器中的意外令牌反应路由器

Question

{
  "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-plugin-transform-object-rest-spread": "^6.23.0",
    "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 应用程序实现服务器端路由。为此，我正在使用 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'
};

我在 < RouterContext {...renderProps}/> 处收到一个意外标记 <。

我已经查看了正在工作的教程，但我不太确定我做错了什么。任何建议将不胜感激

Answer 1

您正在使用 Babel 预设React、es2015和stage-0。

\n\n

这些预设都不包含使您正在使用的对象扩展语法工作 \xe2\x80\x93 这部分代码所需的插件：

\n\n

<RouterContext {...renderProps} />\n

\n\n

您可以通过将transform-object-rest-spread插件添加到Babel配置来解决您的问题，如下所示：

\n\n

module: {\n    loaders: [\n        {\n            loader: \'babel-loader\',\n            query: {\n                presets: [\'react\', \'es2015\', \'stage-0\'],\n                plugins: [\'transform-object-rest-spread\']\n            },\n            test: /\\.jsx?$/,\n            exclude: /(node_modules|bower_components)/\n        }\n    ]\n}\n

\n\n

不要忘记使用安装插件

\n\n

npm install --save-dev babel-plugin-transform-object-rest-spread\n

\n