React-redux error when webpack: SyntaxError: Unexpected token

Question

这里有个奇怪的问题，代码如下：

...
const PrivateRoute = ({status, component: Component, ...rest}) => (
    <Route {...rest} render={ props => (
      status ?
        (<Component {...props}/>) :
        (<Redirect to="/login"/>)
    )}/>
)

function mapStateToProps(state) {
  return {
    status: state.user.status
}

export default connect(mapStateToProps)(PrivateRoute)

webpack -d -w:

时报错

ERROR in ./public/javascripts/src/admin/components/PrivateRoute.jsx
Module build failed: SyntaxError: Unexpected token (4:53)

  2 | import { Route, Redirect } from 'react-router-dom'
  3 | 
> 4 | const PrivateRoute = ({status, component: Component, ...rest}) => (
    |                                                      ^
  5 |   <Route {...rest} render={ props => (
  6 |     status ?
  7 |       (<Component {...props}/>) :

代码只是按照 here 上的教程。但是，代码 blow 还使用了 Route {...rest} 中的 '...'。当我删除第一个“...”时，第二个和第三个不会产生错误。为什么会这样？

Answer 1

这是实验性语法。您需要包括 object-rest-spread plugin in your babel config. Or use a preset that includes this plugin. For example stage-3

截至目前

When I remove the first '...', the second and third doesn't produce the error. Why does that happen?

<Route {...rest} 由包含在 react 预设中的 jsx 插件处理。 Repl.

Answer 2

更新你 .eslintrc.js，将 experimentalObjectRestSpread 设置为 ecmaFeatures 作为 true。

parserOptions: {
  ecmaVersion: 7,
  sourceType: 'module',
  ecmaFeatures: {
    jsx: true,
    experimentalObjectRestSpread: true
  }
}

见https://eslint.org/docs/rules/rest-spread-spacing

React-redux error when webpack: SyntaxError: Unexpected token

React-redux error when webpack: SyntaxError: Unexpected token

reactjs

webpack

react-jsx

react-router

redux