Safari在我打开React应用时报告“意外的令牌'const'”。

Question

我的React应用在Safari浏览器中打开时出现问题，特别是私有路由。错误信息如下：

SyntaxError：意外的记号“const”

我有一个普通的路由函数：

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中的问题截图：

- Borislav Stefanov

---

在 return 语句之前尝试这个代码：const token = sessionStorage.getItem("Token")。然后在 return 语句中，使用该“token”进行登录检查。 - MwamiTovi

@MwamiTovi 同样的问题 - Borislav Stefanov

哦，真的吗！！以为那会起作用。 - MwamiTovi

Answer 1

问题已经解决！问题出在箭头函数声明上。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" />
        );
      }}
    />
  );

- Borislav Stefanov

---

很棒，你已经找到了解决方法。为了实现浏览器兼容性，我们最好避免使用箭头函数，对吧？ - MwamiTovi

@MwamiTovi 是的，最好的做法是避免使用ES6功能，因为并非所有浏览器都能理解ES6。 - Borislav Stefanov

已经注意到了。我非常喜欢箭头函数。但现在我明白了为什么即使在官方的React文档中，“大多数”情况下使用普通函数。可能是为了警告我们要谨慎使用箭头函数:( - MwamiTovi

这就是为什么你要使用像Babel这样的转译器，这样你就可以用es6编写代码，并将其转换为生产环境中的es5。 - Mattijs