Safari сообщает «Неожиданный токен const» при открытии приложения React - PullRequest
2 голосов
/ 19 февраля 2020

У меня проблема с открытием моего приложения React в Safari, особенно с моей личной маршрутизацией. Ошибка:

SyntaxError: Неожиданный токен 'const *

У меня обычный рут function:

function App() {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/login" component={Login} />
        <PrivateRoute path="/dash" component={Dashboard} />
        <PrivateRoute path="/filters" component={Filters} />
        <PrivateRoute path="/profile" component={Profile} />
        <PrivateRoute path="/map" component={Map} />
        <PrivateRoute path="/bookmarks" component={Bookmarks} />
        <PrivateRoute path="/client/:planID/:isLarge" component={Client} />
        <PrivateRoute
          path="/analyses/:planID/:isLarge"
          component={Analyses}
        />
      </Switch>
    </Router>
  );
}

Проблема с этим PrivateRoute , потому что когда я удаляю импорт и теги, он не отображает ошибку. Вот мой личный файл маршрута:

import React from "react";
import { Route, Redirect } from "react-router-dom";

const PrivateRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props =>
        sessionStorage.getItem("Token") ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};
export default PrivateRoute;

Я подозреваю, что возвращение не подходит для Safari, но я не знаю что. Также это работает на Chrome, Mozilla, IE и Edge. Только Safari имеет проблемы.

ОБНОВЛЕНИЕ:

Вот скриншот проблемы в Safari: enter image description here

1 Ответ

1 голос
/ 19 февраля 2020

Исправлено! Проблема была в объявлении функции стрелки. Safari 5.1 действительно плох, и для улучшения работы всех браузеров лучше избегать функций стрелок синтаксиса ES6. Из этого:

const PrivateRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props =>
        sessionStorage.getItem("Token") ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );

Я преобразовал код в это:

function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={function(props) {
        return sessionStorage.getItem("Token") ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        );
      }}
    />
  );
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...