React Router中IndexRedirect加载流程咨询：是否先加载App组件？

先看你的路由配置：

<Route path="/" component={App}>
  <IndexRedirect to="/welcome" />
  <Route path="welcome" component={Welcome} />
  <Route path="about" component={About} />
</Route>

核心结论 #

不会先加载App组件再重定向，重定向发生在组件渲染之前，最终直接渲染/welcome对应的嵌套组件结构。

具体工作机制 #

• 当访问根路径/时，React Router首先匹配到最外层的<Route path="/" component={App}>
• 接着检查该路由下的子路由，发现<IndexRedirect to="/welcome" />——这是针对父路由匹配但无具体子路由匹配场景的索引重定向规则
• 此时React Router会立即触发路由跳转，浏览器地址栏直接从/切换到/welcome，这个过程完全在路由匹配阶段完成，不会渲染App组件
• 地址更新后，React Router重新执行路由匹配：匹配到/welcome路径，此时会先渲染外层的App组件，再将Welcome组件作为children传入App中渲染

加载体验说明 #

用户访问/时，只会看到地址栏瞬间跳转到/welcome，页面直接显示App包裹着Welcome的内容，不会出现先显示App（不带子组件）再跳转的中间状态。

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