Question

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

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


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

参与onEnter挂钩

参与代码分割


另外，保持App感觉很好   从Home解耦并让路由配置决定呈现的内容   这些孩子。请记住，我们希望在小型应用中构建小型应用，   不大！

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

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

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

3-什么是代码分割？

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

Answer 1

每条路线都与一个组件相关联（而不是相反）。它只是表示您可能希望组件不仅在<li class="file" ng-repeat="result in results" ng-class="{blahblah}"> <li class="file" ng-repeat="result in results" ng-class="{blahblah}"> <li class="file" ng-repeat="result in results" ng-class="{blahblah}">（不使用任何路由器的默认路径）中呈现，而且在给定路径上呈现。
我不确定这个，我认为它指的是组件根据路由加载不同数据的能力，最大限度地减少了有效负载。
来自the webpack documentation：

对于大型网络应用程序，将所有代码放入单个应用程序并不高效文件，特别是如果某些代码块只需要一些代码块情况。 Webpack具有将代码库拆分为的功能按需加载的“块”。

Answer 2

如果未指定索引路径，则应用程序中的代码将如下所示：

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允许通过道具附加数据。与Redux或Flux集成时，这很有用。下面的代码显示了App组件如何以通用的方式将Redux props附加到所有组件。

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

在React-Router文档中，此段落在“索引路径”部分中的含义是什么？

2 个答案: