React Router如何在运行时向路由关联组件动态传递props

完全可以实现动态传参逻辑，核心是利用React Router自动注入的路径匹配对象，结合路由的render回调能力，根据动态参数值定制传给Schedule组件的差异化props，以下是具体修正方案和注意事项。

调整App.js的路由配置 #

你当前的Schedule路由使用了exact规则匹配静态路径/schedule，无法命中/schedule/:id这类带动态参数的地址，需要替换为支持动态参数的路由规则：

// 移除原有exact匹配的静态/schedule路由，替换为：
<Route 
  path='/schedule/:id' 
  render={(routerProps) => {
    // 从路由匹配结果中取出动态id参数
    const { id: scheduleId } = routerProps.match.params;
    // 根据id执行业务逻辑，生成差异化的传值数据
    const matchedScheduleInfo = this.getScheduleDetailById(scheduleId);
    return (
      <Schedule 
        alert={this.alert}
        user={user}
        // 向组件传递定制化props
        currentScheduleId={scheduleId}
        scheduleDetail={matchedScheduleInfo}
      />
    )
  }} 
/>

核心注意事项 #

• 路由的render回调必须接收入参：这个入参是React Router自动注入的路由对象，包含match（路径匹配结果）、location、history等核心属性，只有拿到这个对象才能读取动态路径中的:id值，不能像原有静态路由那样使用空的箭头函数参数。
• 如需兼容不带参数的/schedule路径场景，可以额外保留一条独立的匹配规则，且把它放在动态路由规则的前面，避免路径误匹配：

// 放在动态/schedule/:id路由规则之前
<Route exact path='/schedule' render={() => (
  <Schedule alert={this.alert} user={user} showAllScheduleList={true} />
)} />
<Route path='/schedule/:id' render={(routerProps) => {
  // 动态参数逻辑同上
}} />

• 这种配置和你Home组件里的跳转逻辑完全兼容：只要Home组件的跳转路径为/schedule/${对应日程的id}，路由就会命中匹配规则，自动将id值传入render回调逻辑，完成差异化props的传递。
• 避免在使用component属性挂载组件时直接附加自定义props，这种写法会导致组件重复挂载引发性能问题，也存在路由props被覆盖的隐患，需要自定义传参时优先使用上述render回调的写法。

补充说明 #

如果不需要在App层根据id提前处理业务数据，也可以直接通过component属性挂载Schedule组件，路由会自动把match对象注入组件props，Schedule组件内部可以直接通过this.props.match.params.id读取id值执行内部逻辑。

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