此文章,缘起,点击路由标签时,发现在渲染之前的组件,打印日志没有出来,但组件以及渲染了。
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就会更新。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。