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

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

本文关键字：一段 是什么 部分 意思 文档 React-Router 索引 索引路由 路由      更新时间：2023-09-26

在React-Router文档的第8课中，讨论了"索引路由"，他们描述了以下段落:

这将工作得很好，但很可能我们希望Home被附加到未来的About和Repos路线。原因包括:

  • 参与依赖于匹配的数据抓取抽象路由及其组件。
  • 参与onEnter钩子
  • 参与代码拆分

而且，保留App感觉很好从Home解耦，让路由配置决定渲染为什么孩子们。记住，我们想要在小应用中构建小应用，不是大的!

我对其他的文档很好，但是我很难理解他们在这里说什么。

1-"Home附在一条路由上"是什么意思?

2-什么是"数据提取抽象"，为什么这是一件好事?

3-什么是代码分割?

我相信这符合这里的问题格式(客观地回答，与软件相关)。

  1. 每个路由都与一个组件相关联(而不是相反)。它只是说，你可能希望组件不仅在/(不使用任何路由器的默认路径)中呈现，而且在给定的路由上呈现。

  2. 我不确定这个，我认为它是指组件根据路由加载不同数据的能力，最小化有效载荷

  3. 来自webpack文档:

对于大型web应用程序，将所有代码放入一个代码中是不高效的文件，特别是当某些代码块仅在某些情况下需要时环境。Webpack有一个将代码库拆分的功能" chunk "是按需加载的

如果没有指定索引路由，应用程序中的代码将是这样的:

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 
})}
相关文章：