了解到达路由器的基础知识答案

【问题标题】：Understanding basics of reach router了解到达路由器的基础知识
【发布时间】：2018-12-16 13:39:24
【问题描述】：

我正在尝试了解reach 路由器的基础知识并对以下代码有疑问

import React from "react";
import { render } from "react-dom";
import Logo from "./Logo";
import { Router, Link } from "@reach/router";

let Home = () => (
  <div>
    <h1>Home</h1>
    <nav>
      <Link to="/">Home</Link> |{" "}
      <Link to="/dashboard">Dashboard</Link>
    </nav>

  </div>
)

let Dash = () => <div>Dash</div>



render(<Router>
  <Home path="/" />
  <Dash path="dashboard" />
</Router>, document.getElementById("root"));

我知道这个路由器作为路由器 4 的Switch 工作，即只在路由器内部呈现一条路径。现在，当我最初启动应用程序时，我在 Home 内，例如这里

<div>
    <h1>Home</h1>
    <nav>
      <Link to="/">Home</Link> |{" "}
      <Link to="/dashboard">Dashboard</Link>
    </nav>

  </div>

此时我相信Dashboard 组件尚未在任何地方呈现。但是，如果我在 URL 中键入 dashboard 或单击上面的链接，它会正确地将我带到 Dashboard 组件。

我的问题是在这种情况下解析到仪表板的算法如何工作？ 它是否“重新启动”应用程序并看到最初为“仪表板”路由注册了一个组件？ 我的观点是因为当我在家时，页面上没有任何内容表明仪表板组件已在仪表板路由下注册，或者我错了？

【问题讨论】：

标签： javascript reactjs router

【解决方案1】：

<Router> 的内部实现使用history.listen() (https://github.com/reach/router/blob/master/src/index.js#L103)，它反过来侦听本机popstate 事件(https://developer.mozilla.org/en-US/docs/Web/Events/popstate)。你可以在here看到它。

看来你的直觉确实是对的。 <Router> 组件通过监听历史变化来感知历史。由于内部 setState 调用，它会重新渲染路由。

如果您想了解更多关于实现细节的信息，我建议您阅读源代码。

【讨论】：