React JS错误“... rest”语法错误：意外的代币

Question

我是React新手，看着这个ReactTraining。我想使我的一些路径是私人的（这样你只能在登录时查看它们）。我能够验证用户是否正常，并将他们指向新页面，但现在我想“保护”该页面，以便在登录后才能访问该页面。我发现几个不同的sources似乎使用相同的“PrivateRoute “功能如下。一切似乎都工作很好，到目前为止（和有意义），除了这下面的代码“......休息”的一部分：

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
     <Component {...props}/> 
    ) : (
     <Redirect to={{ 
     pathname: '/login', 
     state: { from: props.location } 
     }}/> 
    ) 
)}/> 
) 

我收到以下错误：

Uncaught Error: Cannot find module "./components/Login" 
    at webpackMissingModule (router.js:9) 
    at Object.<anonymous> (router.js:9) 
    at __webpack_require__ (bootstrap 18b9132…:555) 
    at fn (bootstrap 18b9132…:86) 
    at Object.<anonymous> (index.js:22) 
    at __webpack_require__ (bootstrap 18b9132…:555) 
    at fn (bootstrap 18b9132…:86) 
    at Object.<anonymous> (bootstrap 18b9132…:578) 
    at __webpack_require__ (bootstrap 18b9132…:555) 
    at bootstrap 18b9132…:578 
webpackMissingModule @ router.js:9 
(anonymous) @ router.js:9 
__webpack_require__ @ bootstrap 18b9132…:555 
fn @ bootstrap 18b9132…:86 
(anonymous) @ index.js:22 
__webpack_require__ @ bootstrap 18b9132…:555 
fn @ bootstrap 18b9132…:86 
(anonymous) @ bootstrap 18b9132…:578 
__webpack_require__ @ bootstrap 18b9132…:555 
(anonymous) @ bootstrap 18b9132…:578 
(anonymous) @ bootstrap 18b9132…:578 
webpackHotDevClient.js:233 Error in ./src/components/Login.js 
Syntax error: Unexpected token (16:46) 

    14 | 
    15 | 
> 16 | const PrivateRoute = ({ component: Component, ...rest }) => (
    |            ^
    17 | <Route {...rest} render={props => (
    18 | fakeAuth.isAuthenticated ? (
    19 |  <Component {...props}/> 

@ ./src/router.js 25:13-42 

它似乎我正在导入我应该做的所有事情，所以我的想法是，我没有安装应该安装的东西。

有谁知道我可能需要安装以解决此错误？

Answer 1

spread ... syntax不是es2015或react babel预设的一部分。这是目前的第三阶段提案。要启用传播支持你的项目做出反应，安装通天阶段3插件：

npm install --save-dev babel-preset-stage-3 

，并把它添加到您的.babelrc：

{ 
    "presets": [ 
    "es2015", 
    "react", 
    "stage-3" 
    ] 
}