React应用在Safari 5.1中出现严格模式下let保留字语法错误

Safari 5.1确实是个古董级浏览器，完全不支持ES6的核心特性——包括你用到的解构赋值、剩余参数（...rest）和对象展开运算符，这就是报错的根源。咱们把代码全部转成ES5兼容的写法就能解决问题，具体修改如下：

修改后的完整代码 #

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

function PrivateRoute(props) {
  // 手动提取Component，收集剩余props到rest对象
  var Component = props.component;
  var rest = {};
  for (var key in props) {
    if (key !== "component") {
      rest[key] = props[key];
    }
  }

  return (
    <Route 
      // 用Object.assign替代对象展开
      {...Object.assign({}, rest)} 
      render={function(routeProps) {
        return sessionStorage.getItem("Token") ? (
          // 同样用Object.assign传递props
          React.createElement(Component, Object.assign({}, routeProps))
        ) : (
          React.createElement(Redirect, { to: "/login" })
        );
      }} 
    />
  );
}

export default PrivateRoute;

关键修改点说明 #

1. 移除参数解构与剩余参数：
   Safari 5.1不支持{ component: Component, ...rest }这种语法，所以我们手动遍历props，把component单独提取，剩下的属性存入rest对象。
2. 替换对象展开运算符：
   {...rest}和{...props}同样不被支持，改用Object.assign({}, rest)来合并对象（第一个空对象是为了避免修改原props）。
3. 改用React.createElement：
   虽然JSX本身编译后会转成createElement，但直接写ES5风格的createElement能避免一些潜在的编译后兼容问题，确保Safari 5.1能正确解析。

另外，如果你用的create-react-app，默认的Babel配置可能没有包含这么老旧的浏览器兼容，你可以在项目根目录创建.browserslistrc文件，加入：

safari >= 5.1

然后重新构建项目，这样Babel会自动把更多ES6+代码转成ES5，减少手动修改的工作量。

内容的提问来源于stack exchange，提问作者Borislav Stefanov