javascript - 了解到达路由器的基础知识

Question

我正在尝试了解 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 组件。

我的问题是在这种情况下解析到仪表板的算法如何工作？它是否“重新启动”应用程序并看到最初有一个为“仪表板”路由注册的组件？我的意思是因为当我在家时，页面上不再显示 Dashboard 组件已在 dashboard 路由下注册，还是我错了？

Answer 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，它重新呈现路线电话。

如果您想了解更多实现细节，我建议您查看源代码。