React JS Fehler "... Rest" Syntax Fehler: Unerwarteter Token

Question

Ich bin neu zu reagieren und mit Blick auf diese ReactTraining. Ich möchte einige meiner Pfade als privat markieren (so können Sie sie nur anzeigen, wenn Sie eingeloggt sind). Ich bin in der Lage, Benutzer gut zu authentifizieren und sie auf eine neue Seite zu leiten, aber jetzt möchte ich diese Seite "schützen", so dass sie nur nach dem Einloggen zugänglich ist. Ich habe ein paar verschiedene sources gefunden, die die gleiche "PrivateRoute verwenden "Funktion unten. Alles scheint sehr gut zu funktionieren so weit (und sinnvoll), mit Ausnahme des „... rest“ Teil dieses folgenden Code:

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

Ich erhalte die folgende Fehlermeldung:

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 

Es scheint, dass ich alles importiere, was ich sein sollte, also denke ich, dass ich nicht etwas installiert habe, das sein sollte.

Weiß jemand, was ich installieren muss, um diesen Fehler zu beheben?

Answer 1

Die spread ... syntax ist nicht Teil der es2015 oder react Babel Presets. Es ist derzeit ein Vorschlag für Stufe 3. Um die Unterstützung für Verbreitung in Ihrem Reagieren Projekt, installieren Sie das babel Stufe 3 Plugin:

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

und fügen Sie sie .babelrc:

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