Question

我知道Router组件（例如BrowserRouter创建了一个用于跟踪路径等的历史对象，并且Route组件仅在其路径匹配时才呈现其视图）当前位置，我认为是从历史记录中读取的。我的问题是Route组件如何访问由BrowserRouter创建的历史对象。正在进行内幕交流，这使之成为可能吗？

Answer 1

这是上下文API“魔术”。

<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可以在树下提供许多级别的数据/方法，而无需快速传递道具（在每个级别上）。您可以在docs上阅读有关此内容的更多信息，或搜索教程。

React`Router`组件如何与`Route`组件通信？

1 个答案: