我正在 React-JS 中使用 React-Router:
这<Route>
是一个内置组件,有两个不同的props:
exact
和strict
问题
该文档没有明确定义exact
和之间的区别strict
。
请帮助我。该文件非常混乱,当时不清楚。
我正在 React-JS 中使用 React-Router:
这<Route>
是一个内置组件,有两个不同的props:
exact
和strict
问题
该文档没有明确定义exact
和之间的区别strict
。
请帮助我。该文件非常混乱,当时不清楚。
如果您一起使用exact
and strict
,那么location.pathname
将仅与路径props中提供的完全匹配。
例子:
<Route exact strict path="/one/" component={About}/>
只会匹配/one/
而不匹配/one
and /one/two
。
如果仅使用strict
,location.pathname
则将匹配尾随斜线。
例子:
<Route strict path="/one/" component={About}/>
将匹配/one/
and/one/two
但不匹配/one
。
如果您只使用exact
,则location.pathname
将匹配精确的位置路径。
例子:
<Route exact path="/one" component={About}/>
将匹配/one
或/one/
。该exact
props不关心斜线。但它不会匹配/one/two
。
ReactRouter 的strict
prop 定义路径名中是否有严格的请求路径条目,如文档中所述。例如,如果您不希望在没有尾部斜杠的情况下处理页面的路由,您Route
可以这样描述:
<Route path="/mypath/" strict ... />
所以路径名/mypath
不会用 this 处理,Route
路径/mypath/
名将是。注意,在这种模式下这Route
也将赶上其他孩子的路由,例如/mypath/childroute
,/mypath/childroute/childroute2
等等,但它不会赶上路线/mypath?query=...
。想想这个props,就像你正在使用"string".includes("substring")
:
"/mypath".includes("/mypath/") => false
"/mypath/".includes("/mypath/") => true
"/mypath/kappa".includes("/mypath/") => true
该exact
props是用来定义如果有确切的请求的路径。通常它用于包装没有子路由的路由(例如主页)。
<Route path="/" exact ... />
<Route path="/" ... />
第一条路线会赶上像只路线mydomain.com
,mydomain.com/
,mydomain.com/?query=...
等第二个将捕获的所有途径,例如两者的mydomain.com
和mydomain.com/myroute
。