<Route> render回调内Object.assign触发TS报错及传参相关问题求解

一、路由render回调中的props是否必须全量展开传递 #

完全没有强制要求必须写{...props}，传参的范围完全由组件自身的实际需求决定：

• <Route>组件的render回调接收到的props，是React Router提供的路由上下文属性，包含match、location、history、静态路由配置等内容。只有当你需要让子组件用到这些路由能力时（比如根据match.params读取动态路由参数、调用history.push做页面跳转、根据location变化触发组件逻辑），才需要把这些属性传给子组件。
• 如果你的MyComponent是纯业务组件，完全不需要和路由能力交互，哪怕只传业务需要的groups、user两个属性，不展开任何路由props，也完全符合React的设计规范，不存在任何问题。
• 官方示例中render={({ match }) => <BlogPost match={match} />}的写法，本质是按需解构传递，只把组件真正需要的路由属性传下去，避免多余的字段污染组件props，这种写法比全量展开{...props}更可控，能减少意外的同名字段覆盖问题。
• 常见的{...props}写法只是一种简写优化：在封装通用路由组件、或子组件深度依赖路由能力的场景下，一次性全量传递路由props可以减少重复解构、逐字段传参的代码量，不是必须遵守的硬性规则。

补充提醒：展开属性时要注意字段顺序的覆盖逻辑——后写的属性会覆盖前面展开的同名字段。比如<MyComponent {...props} user={user} />中，如果路由自带的props里已经包含user字段，你后面写的user会把路由传入的user覆盖掉，需要提前确认是否符合预期。

二、Object.assign写法的TS报错原因与Safari9兼容实现 #

报错根源 #

你遇到的'...' expected.ts(1005)是纯语法层面的解析错误，和类型检查无关：
JSX标签的属性区域（也就是<MyComponent>尖括号内部的属性写入位置）只支持两种语法结构：

1. 键值对形式：propName={propValue}
2. 展开运算符形式：{...目标对象}
   你写的{Object.assign({}, props)}是把一个普通函数调用的返回值直接放在属性区的大括号里，既不是键值对结构，也不是以...开头的展开语法，TS的JSX解析器在这个位置预期会看到展开运算符，因此抛出语法错误。

兼容Safari9的实现方案 #

Object.assign本身是ES2015级别的API，仅需要给极低版本浏览器补充轻量polyfill，对Safari9的兼容成本远低于原生对象展开（对象展开是ES2018特性，Safari11.1才开始原生支持），完全可以实现等效的属性传递，不需要依赖浏览器的原生对象展开能力，正确写法如下：

• 先在JSX代码块外部，用Object.assign把所有需要传给组件的路由属性、业务属性合并成独立的props对象，全程使用ES5语法，不涉及对象展开操作。
• 如果希望完全避开JSX中的展开语法，可以直接使用React原生的createElement方法渲染组件，把合并好的props对象作为第二个参数传入，这个API从React早期版本就提供，不存在兼容问题。
  参考示例：

  <Route 
    path={`${path}/some/thing`} 
    render={(routeProps) => {
      // 纯ES5逻辑合并props，无对象展开
      const mergedProps = Object.assign({}, routeProps, {
        groups: groups,
        user: user
      })
      // 直接渲染，不需要写JSX展开语法
      return React.createElement(MyComponent, mergedProps)
    }} 
  />
  

• 如果你习惯使用JSX标签的书写形式，只需要在项目构建链路中开启Babel的对象展开转译插件，哪怕你在代码里写{...mergedProps}的展开语法，Babel也会在编译阶段把这段代码转成Object.assign的实现，最终打包产物在运行时完全不依赖浏览器的原生对象展开能力，Safari9可以正常运行，不需要手动手写Object.assign。

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