在 React-Router 文档中，"Index Routes" 部分中的这一段是什么意思？

Question

在 Lesson 8 of the React-Router docs 中，讨论 "Index Routes"，他们描述了以下段落：

This would work fine, but its likely we'll want Home to be attached to a route like About and Repos in the future. A few reasons include:

Participating in a data fetching abstraction that relies on matched routes and their components.

Participating in onEnter hooks

Participating in code-splitting

Also, it just feels good to keep App decoupled from Home and let the route config decide what to render as the children. Remember, we want to build small apps inside small apps, not big ones!

我对其他文档没问题，但我很难理解他们在这里谈论的内容。

1- “Home 附加到路由”是什么意思？

2- 什么是 "data fetching abstraction"，为什么这是好事？

3-什么是代码拆分？

我认为这符合这里的问题格式（客观可回答，与软件相关）。提前致谢。

Answer 1

每条路线都与一个组件相关联（而不是相反）。它只是说您可能希望组件不仅在 /（不使用任何路由器的默认路径）中呈现，而且在给定的路由中呈现。
这个我不太确定，我觉得是指一个组件能够根据路由加载不同的数据，最小化payload。
来自 the webpack documentation:

For big web apps it’s not efficient to put all code into a single file, especially if some blocks of code are only required under some circumstances. Webpack has a feature to split your codebase into “chunks” which are loaded on demand.

Answer 2

如果不指定Index路由，App中的代码将如下所示：

renderChild() {
  return this.props.children.length ? this.props.children : this.renderMain();
}

renderMain() {
  return <SomeDOM />;
}

render() {
  return (
    <layout>
      <header />
      {this.renderChild()}
      </footer />
    </layout>
  );
}

IndexRoute 启用 onEnter 挂钩。 onEnter 对于身份验证之类的事情很有用。如果用户未通过身份验证，则可以显示登录页面。

IndexRoute 允许通过 props 附加数据。这在与 Redux 或 Flux 集成时很有用。下面的代码展示了 App 组件如何以一种通用的方式将 Redux props 附加到所有组件。

{React.cloneElement(this.props.children, { 
  ...this.props, 
  children: this.props.children.props.children 
})}

在 React-Router 文档中，"Index Routes" 部分中的这一段是什么意思？

In React-Router docs, what does this paragraph mean in the "Index Routes" section?

javascript

routing

reactjs

react-routing