React中<Route />与<Route></Route>的用法差异及渲染影响解析

渲染逻辑与核心差异 #

1. 自闭合写法（component属性） #

<Route path="/home" component={App} />

• React Router会自动创建组件实例，并将路由专属props（match、location、history）直接注入组件，无需手动处理。
• 路由匹配时，类组件会触发完整生命周期流程，函数组件会重新执行；但如果把component设为内联函数（比如component={() => <App />}），每次渲染都会生成新组件实例，导致重复卸载挂载，不建议这么写。

2. 包裹子组件写法（children元素） #

<Route path='/about'><About /></Route>

• 子组件由开发者手动渲染，路由props不会自动注入，需要的话得自行通过useParams、useLocation这类hooks，或withRouter高阶组件获取。
• 关键特性：无论路由是否匹配，这个子组件都会被渲染（若配合Switch组件，则只有匹配的Route子元素才会渲染）。
• 可自由给子组件传递自定义props，比如<Route path='/about'><About pageTitle="关于我们" /></Route>，灵活度更高。

适用场景 #

• 自闭合（component属性）：适合页面级路由组件，无需额外传递自定义props，写法简洁，路由props自动到位，省去手动处理步骤。
• 包裹子组件写法：
  • 需要给子组件传递自定义props时；
  • 不管路由是否匹配都要渲染内容（比如导航栏菜单项，即使当前路由不匹配也要显示，仅高亮匹配项）；
  • 使用函数组件且习惯通过hooks获取路由信息的场景，无需依赖Route注入props。

注：react-router-dom v6已移除component属性，统一使用element属性（比如<Route path="/home" element={<App />} />），新项目建议优先采用v6写法。

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