Что в документе React-Router означает этот абзац в разделе "Индексные маршруты"?

Question

В уроке 8 документов React-Router, в которых обсуждаются "индексные маршруты", они описывают следующий абзац:

Это будет работать нормально, но, скорее всего, мы хотим Home быть привязанным к маршруту как About а также Repos в будущем. Несколько причин включают в себя:

• Участие в абстракции выборки данных, основанной на сопоставленных маршрутах и ​​их компонентах.
• Участие в onEnter крючки
• Участие в разделении кода

Кроме того, это просто приятно держать App отделен от Home и пусть конфиг маршрута решает, что делать в качестве детей. Помните, мы хотим создавать маленькие приложения внутри маленьких, а не больших!

Я был в порядке с остальными документами, но мне трудно понять, о чем они говорят здесь.

1- Что они подразумевают подHome привязан к маршруту "?

2- Что такое "абстракция выборки данных", почему это хорошо?

3- Что такое разделение кода?

Я считаю, что это соответствует формату вопросов здесь (объективно отвечающий, связанный с программным обеспечением). Заранее спасибо.

Answer 1

1. Каждый маршрут связан с компонентом (не наоборот). Это просто говорит о том, что вы можете захотеть, чтобы компонент отображался не только в / (путь по умолчанию без использования какого-либо маршрутизатора), но на заданном маршруте.

2. Я не уверен в этом, я думаю, что это относится к способности компонента загружать различные данные в зависимости от маршрута, минимизируя полезную нагрузку.

3. Из документации веб-пакета:

Для больших веб-приложений неэффективно помещать весь код в один файл, особенно если некоторые блоки кода требуются только при определенных обстоятельствах. В 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 общим способом ко всем компонентам.

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