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

IT技术 javascript reactjs web-applications react-router react-router-redux
2022-08-04 02:12:21

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

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

看来我正在导入我应该导入的所有内容,所以我的想法是我没有安装应该安装的东西。

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

1个回答

扩展...语法不是es2015or reactbabel 预设的一部分。目前是第 3 阶段的提案。要在您的 React 项目中启用对 spread 的支持,请安装 babel stage 3 插件:

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

并将其添加到您的.babelrc

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