在 React-Router 文档中，这一段在“索引路由”部分是什么意思？答案

【问题标题】：In React-Router docs, what does this paragraph mean in the "Index Routes" section?在 React-Router 文档中，这一段在“索引路由”部分是什么意思？
【发布时间】：2016-09-02 02:34:20
【问题描述】：

在Lesson 8 of the React-Router docs，讨论“索引路由”时，他们描述了以下段落：

这可以正常工作，但我们可能希望将Home 附加到将来会像About 和Repos 这样的路线。几个原因包括：

参与依赖于匹配的数据提取抽象路线及其组成部分。

参与onEnter钩子

参与代码拆分

另外，保持App 感觉很好与Home 解耦，让路由配置决定渲染的内容这些孩子。请记住，我们想在小应用程序中构建小应用程序，不是大的！

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

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

2- 什么是“数据提取抽象”，为什么这是一件好事？

3- 什么是代码拆分？

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

【问题讨论】：

标签： javascript reactjs routing react-routing

【解决方案1】：

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

对于大型 Web 应用，将所有代码放在一个单一的代码中效率不高文件，特别是如果某些代码块仅在某些情况下需要情况。 Webpack 具有将代码库拆分为按需加载的“块”。

【讨论】：

【解决方案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 
})}

【讨论】：