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上的教程。但是，代码打击也使用了＆＃39; ...＆＃39;在路线{... rest}。当我删除第一个＆＃39; ...＆＃39;时，第二个和第三个不会产生错误。为什么会这样？

Answer 1

这是实验语法。您需要在babel配置中包含object-rest-spread插件。或者使用包含此插件的预设。例如stage-3

截至此

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

<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

webpack时出现React-redux错误：SyntaxError：意外的令牌

2 个答案: