React JS 错误“...rest"语法错误:意外的令牌

问题描述

我是 React 的新手，正在看这个 ReactTraining.我想将我的一些路径设为私有(这样您只能在登录时查看它们).我能够很好地对用户进行身份验证并将他们定向到一个新页面，但现在我想保护"该页面，以便只有在登录后才能访问它.我发现了一些不同的 sources 似乎使用相同的PrivateRoute""功能如下.到目前为止，一切似乎都很好(并且有意义)，除了以下代码的...rest"部分:

I am new to React and looking at this ReactTraining. I would like to make some of my paths private (that way you can only view them when you are logged in). I am able to authenticate users fine and direct them to a new page, but now I would like to "Protect" that page so that it is only accessible after logging in. I found a few different sources that seem to use the same "PrivateRoute" function below. Everything seems to work great so far (and makes sense), except for the "...rest" part of this following code:

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

看来我正在导入我应该做的所有东西，所以我的想法是我没有安装应该安装的东西.

It appears that I am importing everything that I should be so my thought is that I don't have something installed that should be.

有谁知道我可能需要安装什么来解决这个错误?

Does anyone know what I may need to install to resolve this error?

推荐答案

传播 ... 语法 不是 es2015 或 react babel 预设的一部分.这是目前的第 3 阶段提案.要在 React 项目中启用对传播的支持，请安装 babel stage 3 插件:

The spread ... syntax is not part of the es2015 or react babel presets. It's currently a stage 3 proposal. To enable support for spread in your React project, install the babel stage 3 plugin:

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

并将其添加到您的 .babelrc 中:

and add it to your .babelrc:

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

这篇关于React JS 错误“...rest"语法错误:意外的令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！