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的算法如何工作？ 它是否“重启”了应用程序，并且最初发现有一个组件已注册用于“仪表板”路线？ 我的观点是因为当我在家庭位置时，页面上再没有任何内容指示仪表板组件已在仪表板路线下注册，还是我错了？

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调用，它会重新呈现路由。

如果您想进一步了解实现细节，我建议阅读源代码。

了解到达路由器的基础

1 个答案: