React -Router : What is the purpose of IndexRoute?

React Router 的 IndexRoute 是用于定义当父路由匹配但没有任何子路由匹配时应当渲染的组件。它通常用于实现在父路由下的默认页面展示。

例如，假设我们有一个应用程序，主要包含三个页面：首页、关于我们和联系方式。在使用 React Router 时，我们可以设置这样的路由结构：

jsx
<Router history={browserHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={HomePage} />
    <Route path="about" component={AboutPage} />
    <Route path="contact" component={ContactPage} />
  </Route>
</Router>

在这个例子中，App 是一个布局组件，它定义了整个应用的结构，如导航栏和页脚等。HomePage, AboutPage, 和 ContactPage 是具体的页面内容组件。

• 当用户访问根 URL / 时，App 组件被渲染，IndexRoute 也会确保 HomePage 组件被渲染在 App 组件的内部，作为默认显示的页面。
• 当用户访问 /about 或 /contact 时，相应的 AboutPage 或 ContactPage 组件会被渲染，替换掉默认的 HomePage 组件。

使用 IndexRoute 可以很方便地指定一个默认的子路由组件，这对于用户体验和网站结构的清晰性有非常大的帮助。