Как реагирующий компонент Router взаимодействует с компонентом Route?

Question

Я знаю, что компонент Router, скажем BrowserRouter создает объект истории для отслеживания путей и т. Д., И что компонент Route отображает свой вид только тогда, когда его путь соответствует текущему местоположению, которое я Предположим, это читается из истории. У меня вопрос, как компонент Route получает доступ к объекту истории, созданному BrowserRouter. Есть ли какая-то коммуникация под капотом, которая делает это возможным?

Answer 1

Это контекст api 'magic'.

<BrowserRouter/> делает <Router/>:

class BrowserRouter extends React.Component {
  history = createHistory(this.props);

  render() {
    return <Router history={this.history} children={this.props.children} />;
  }
}

<Router/> делает <RouterContext.Provider/>:

  <RouterContext.Provider
    children={this.props.children || null}
    value={{
      history: this.props.history,

<Route/> использует <RouterContext.Consumer> для предоставления доступа к данным от провайдера.

Использование контекста api позволяет предоставлять данные / методы на многих уровнях вниз по дереву без необходимости явной передачи реквизита (на каждом уровне). Вы можете прочитать больше об этом на документах или искать учебники.