Safari 报告“意外的标记 'const'"当我打开我的 React 应用程序时

问题描述

我在 Safari 中打开 React App 时遇到问题，尤其是我的私有路由.错误:

I have problem with my React App opening in Safari and especially my private routing.Error:

语法错误:意外的标记const"

我有普通的root功能:

I have ordinary rooting 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 上，因为当我删除导入和标签时，它没有显示错误.这是我的私人路线文件:

The problem is with this PrivateRoute because when I remove the import and tags it is not displaying the error. Here is my private route file:

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 有问题.

I suspect something in returning is not right for Safari but I do not know what. Also this is working in this way on Chrome, Mozilla, IE and Edge. Only Safari have problems.

更新:

这是 Safari 中问题的屏幕截图:

Here is the screenshot of issue in Safari:

推荐答案

已修复！问题是箭头函数声明.Safari 5.1 真的很糟糕，为了适应所有浏览器，最好避免 ES6 语法箭头函数.从此:

Fixed it! The problem was arrow function declaration. Safari 5.1 is really bad and for getting well with all browsers it is better to avoid ES6 syntax arrow functions. From this:

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" />
        );
      }}
    />
  );

这篇关于Safari 报告“意外的标记 'const'"当我打开我的 React 应用程序时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！