当 webpack 时出现 react-redux 错误:语法错误:意外的令牌

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}/>) :

代码只需按照此处的教程进行操作即可。但是，代码打击也使用"..."在路线{...休息}。当我删除第一个"..."时，第二个和第三个不会产生错误。为什么会这样？

Answer 1

这是实验性的语法。你需要在你的 babel 配置中包含对象-休息-传播插件。或者使用包含此插件的预设。例如stage-3

截至此

当我删除第一个"..."时，第二个和第三个不会产生错误。为什么会这样？

<Route {...rest}由包含在预设react JSX 插件处理。 代表。

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