React Router中<Route>的children元素与render属性用法有何区别？

你给出的两个示例因包裹在Switch组件内、无额外参数传递，所以运行表现完全一致，但二者底层逻辑、适用场景和未来兼容性存在明显差异：

核心差异 #

• 路由属性注入逻辑不同
  直接作为children写入的组件（如<Home />）默认不会被自动注入match、location、history三个路由属性，需要组件内部调用useParams、useLocation等Hook，或用withRouter高阶组件包裹才能拿到路由相关信息。
  而render属性接收的函数会默认被传入这三个路由属性，你可以直接通过参数获取后透传给组件：render={(routeProps) => <Home {...routeProps} />}，无需在组件内部额外调用Hook，更适配类组件场景。
• 性能开销不同
  render属性传入的内联函数会在每次父组件重渲染时生成新的函数引用，虽然微小场景下感知不明显，但会带来额外的重渲染开销。children写法则没有额外函数创建成本，配合纯组件使用时性能表现更好。
• 未来兼容性不同
  React Router v6 版本已经完全移除了render和component属性，仅保留了children写法。如果后续有升级框架版本的需求，children写法可以无缝迁移，render写法则需要全部重构。

写法选择建议 #

• 无特殊逻辑时优先选children写法：代码更简洁易读，性能开销更低，符合官方后续的设计规范，兼容性更好。
• 当你需要在渲染路由组件前执行临时逻辑（如权限校验、按条件渲染不同内容、给类组件透传路由属性）时，可以选择render写法，比抽离额外的封装组件更灵活。

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