Javascript 狩猎报告”；意外标记'；常数'&引用；当我打开React应用程序时

我在Safari中打开React应用程序时遇到问题，尤其是我的私人路由。错误：

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;

从“React”导入React；
从“react router dom”导入{Route，Redirect}；
const privaterout=（{component:component，…rest}）=>{
返回(
sessionStorage.getItem（“令牌”）(
) : (
)
}
/>
);
};
导出默认私有路由；

我怀疑返回时有些东西不适合狩猎，但我不知道是什么。同样，在Chrome、Mozilla、IE和Edge上也是如此。只有Safari有问题

更新：

以下是Safari中问题的屏幕截图：

---

修复了它！问题是arrow函数声明。Safari5.1真的很糟糕，为了更好地使用所有浏览器，最好避免使用ES6语法箭头函数。由此：

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

const PrivateRoute=（{component:component，…rest}）=>{
返回(
sessionStorage.getItem（“令牌”）(
) : (
)
}
/>
);

我将代码转换为：

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

函数PrivateRoute（{component:component，…rest}）{
返回(
);

在return语句之前尝试此操作；

const token=sessionStorage.getItem（“token”）

。然后在return语句中使用“token”对于那个登录检查，@MwamiTovi同样的问题哦，真的！！我认为这会起作用。你已经找到了解决这个问题的方法。为了实现浏览器兼容性，我们最好避免使用箭头功能，对吗？@MwamiTovi是的，似乎最好的做法是避免使用ES6功能，因为不是所有的浏览器都理解ES6。我非常喜欢arrow函数。但现在我明白了为什么即使在官方的React文档中“大部分”都使用正常函数。可能是为了提醒我们少用arrow函数：（这就是为什么您使用像Babel这样的transpiler，这样您就可以在es6中编写代码，并将其转换为es5进行生产。