探究React-Router的本質

此文章,緣起,點擊路由標籤時,發如今渲染以前的組件,打印日誌沒有出來,但組件以及渲染了。react

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;

我認爲應該彈窗的。每次點擊路由應該從新刷新一遍,結果不是。
我這樣的假設是什麼?express

觀察結果(現象)

點擊頁面上<Link>的標籤承載的數據時,並無執行alert函數。ParamsExample組件沒有刷新。瀏覽器

研究原先假設

瀏覽器界面的更改,一定致使虛擬DOM從新創建,必然致使DOM更新,DOM更新,HMTL就會更新。react-router

反思校訂假設

相關文章
相關標籤/搜索