探究ReactRouter的本质

47次阅读

共计 1004 个字符,预计需要花费 3 分钟才能阅读完成。

此文章,缘起,点击路由标签时,发现在渲染之前的组件,打印日志没有出来,但组件以及渲染了。

import React from "react";
import {BrowserRouter as Router, Route, Link} from "react-router-dom";

function ParamsExample() {alert("c")
  return (
    <Router>
      <div>
        <h2>Accounts</h2>
        <ul>
          <li>
            <Link to="/netflix">Netflix</Link>
          </li>
          <li>
            <Link to="/zillow-group">Zillow Group</Link>
          </li>
          <li>
            <Link to="/yahoo">Yahoo</Link>
          </li>
          <li>
            <Link to="/modus-create">Modus Create</Link>
          </li>
        </ul>

        <Route path="/:id" component={Child} />
        <Route path="/:id" component={Child} />
        {/*
           It's possible to use regular expressions to control what param values should be matched.
              * "/order/asc"  - matched
              * "/order/desc" - matched
              * "/order/foo"  - not matched
        */}
      </div>
    </Router>
  );
}

function Child({match}) {
  return (
    <div>
      <h3>ID: {match.params.id}</h3>
    </div>
  );
}

function ComponentWithRegex({match}) {
  return (
    <div>
      <h3>Only asc/desc are allowed: {match.params.direction}</h3>
    </div>
  );
}

export default ParamsExample;

我认为应该弹窗的。每次点击路由应该重新刷新一遍,结果不是。
我这样的假设是什么?

观察结果(现象)

点击页面上 <Link> 的标签承载的数据时,并没有执行 alert 函数。ParamsExample 组件没有刷新。

研究原先假设

浏览器界面的更改,必定导致虚拟 DOM 重新建立,必然导致 DOM 更新,DOM 更新,HMTL 就会更新。

反思校正假设

正文完
 0