This article, origin, when clicking the routing tab, found that the components before rendering, print log did not come out, but the components and rendering.

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;

I think it should pop up. Every click on the route should be refreshed again, the result is not.
What is my assumption?

Observation results (phenomena)

When clicking on the data carried by the < link > tag on the page, the alert function is not executed. The ParamsExample component was not refreshed.

Study the original hypothesis

The change of browser interface will inevitably lead to the re establishment of virtual Dom and the update of DOM, and the update of HMTL.

Introspective correction hypothesis