使用严格的道具

Question

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

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

问题

documentation并未明确定义exact和strict之间的区别。

请帮助我。该文档非常混乱，目前还不清楚。

Answer 1

用例1

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

示例：

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

仅匹配/one，而不匹配/one/和/one/two。

示例：

<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不匹配。

Answer 2

ReactRouter的strict属性定义了路径名中是否存在所请求路径的 strict 条目，如docs中所述。例如，如果您不希望在不使用斜杠的情况下处理页面的路线，则可以这样描述您的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。