使用精确和严格的道具

Posted 2023-02-21

【中文标题】使用精确和严格的道具

【英文标题】：Usage of exact and strict props

【发布时间】：2019-02-15 21:54:12

【问题描述】：

我正在使用 React-JS 中的 React-Router：

<Route> 是一个内置组件，有两个不同的属性： exact 和 strict

问题

documentation 没有明确定义 exact 和 strict 之间的区别。

请帮助我。该文件非常混乱，当时还不清楚。

【参考方案1】：

用例 1

如果您同时使用exact 和strict，则location.pathname 将仅与路径道具中提供的完全匹配。

例子：

<Route exact strict path="/one/" component=About/>

将仅匹配 /one/，但不匹配 /one 和 /one/two。

用例 2

如果您只使用strict，则location.pathname 将匹配带有斜杠的。

例子：

<Route strict path="/one/" component=About/>

将匹配 /one/ 和 /one/two 但不匹配 /one。

用例 3

如果您只使用exact，那么location.pathname 将匹配精确的位置路径。

例子：

<Route exact path="/one" component=About/>

将匹配 /one 或 /one/。 exact 属性不关心斜杠。但它不会匹配/one/two。

【讨论】：

请详细说明。或将任何文章的链接发给我

知道了……你的回答对我很有帮助。

很高兴，你明白了。

您以一种很好的方式提出了答案。非常感谢。

【参考方案2】：

ReactRouter 的 strict 属性定义了路径名中是否存在请求路径的 strict 条目，如文档中所述。例如，如果您不想处理没有尾部斜杠的页面路由，您的Route 可以这样描述：

<Route path="/mypath/" strict ... />

所以路径名/mypath 不会被这个Route 处理，而路径名/mypath/ 会被处理。请注意，在这种模式下，Route 还将捕获其他子路由，例如/mypath/childroute、/mypath/childroute/childroute2 等，但它不会赶上路线 /mypath?query=...。想想这个道具，就像你使用"string".includes("substring")：

"/mypath".includes("/mypath/")       => false
"/mypath/".includes("/mypath/")      => true
"/mypath/kappa".includes("/mypath/") => true

---

exact 属性用于定义是否存在正是请求的路径。 通常它用于包装没有子路由的路由（例如主页）。

<Route path="/" exact ... />
<Route path="/" ... />

第一条路线将仅捕获 mydomain.com、mydomain.com/、mydomain.com/?query=... 等路线。第二条路线将捕获所有路线，例如mydomain.com 和 mydomain.com/myroute。