有人可以解释两者之间的区别吗
<Route exact path="/" component={Home} />
和
<Route path="/" component={Home} />
我不知道 的意思exact
。
有人可以解释两者之间的区别吗
<Route exact path="/" component={Home} />
和
<Route path="/" component={Home} />
我不知道 的意思exact
。
在这个例子中,什么都没有。exact
当您有多个具有相似名称的路径时,该参数就会发挥作用:
例如,假设我们有一个Users
显示用户列表的组件。我们还有一个CreateUser
用于创建用户的组件。的 urlCreateUsers
应该嵌套在Users
. 所以我们的设置看起来像这样:
<Switch>
<Route path="/users" component={Users} />
<Route path="/users/create" component={CreateUser} />
</Switch>
现在的问题是,当我们转到http://app.com/users
路由器时,将遍历我们定义的所有路由并返回它找到的第一个匹配项。所以在这种情况下,它会先找到Users
路由,然后返回它。都好。
但是,如果我们转到http://app.com/users/create
,它将再次通过我们定义的所有路由并返回它找到的第一个匹配项。React 路由器做部分匹配,所以/users
部分匹配/users/create
,所以它会Users
再次错误地返回路由!
该exact
参数禁用路由的部分匹配,并确保仅当路径与当前 url 完全匹配时才返回路由。
所以在这种情况下,我们应该添加exact
到我们的Users
路由中,以便它只匹配/users
:
<Switch>
<Route exact path="/users" component={Users} />
<Route path="/users/create" component={CreateUser} />
</Switch>
简而言之,如果您为应用程序的路由定义了多个路由,则用这样的Switch
组件封装;
<Switch>
<Route exact path="/" component={Home} />
<Route path="/detail" component={Detail} />
<Route exact path="/functions" component={Functions} />
<Route path="/functions/:functionName" component={FunctionDetails} />
</Switch>
然后,您必须将exact
关键字放在Route 中,它的路径也包含在另一个 Route 的路径中。例如,主路径/
包含在所有路径中,因此它需要有exact
关键字以将其与其他以/
.开头的路径区分开来。原因也类似于/functions
路径。如果您想使用其他路线路径,例如/functions-detail
或/functions/open-door
其中包含的路线/functions
,则需要使用exact
该/functions
路线。
看看这里:https : //reacttraining.com/react-router/core/api/Route/exact-bool
精确:布尔
当为真时,仅当路径location.pathname
完全匹配时才匹配。
**path** **location.pathname** **exact** **matches?**
/one /one/two true no
/one /one/two false yes
在这个例子中,什么都没有。当您有多个具有相似名称的路径时,确切的参数就会发挥作用:
例如,假设我们有一个显示用户列表的用户组件。我们还有一个用于创建用户的 CreateUser 组件。CreateUsers 的 url 应该嵌套在用户下。所以我们的设置看起来像这样:
通过使用exact,您可以确保主页组件的内容不会出现在其他页面上。
这是不使用精确的场景:
主页
地点: /
-----------------
homepage content
-----------------
第二页
位置:/第二页
-----------------
homepage content
-----------------
-----------------
second content
-----------------
==========================================
使用精确:
主页
地点: /
-----------------
homepage content
-----------------
第二页
位置:/第二页
-----------------
second content
-----------------