リアクト - ReduxのWebPACKのエラー：にSyntaxError：予期しないトークン

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上のチュートリアルに従っています。 しかし、コードブローはRoute {... rest}の '...'も使用します。最初の '...'を削除すると、2番目と3番目にエラーが発生しません。なぜそれが起こるのですか？

Answer 1

これは実験的な構文です。あなたのバーベル設定にobject-rest-spreadプラグインを含める必要があります。または、このプラグインを含むプリセットを使用します。この

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

<Route {...rest}の例としてstage-3

ためJSXプラグインによって処理さreactプリセットに含まれます。 Repl。