react:<Route 精确路径="/" /> 和 <Route path="/" /> 之间的区别

IT技术 reactjs react-router react-router-dom
2021-03-23 23:37:59

有人可以解释两者之间的区别吗

<Route exact path="/" component={Home} />

<Route path="/" component={Home} />

我不知道 的意思exact

6个回答

在这个例子中,什么都没有。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>

文档exact详细解释并给出了其他示例。

@ChaseDeAnda 我需要的恰恰相反。也许我应该写一个关于 SO 的新答案来澄清我的情况并得到正确的答案。
2021-05-25 23:37:59
我认为这种行为只有在两条路由都在其 Switch 父级(或组件)的同一级别时才有效
2021-06-06 23:37:59
exact 在我看来应该是默认值
2021-06-07 23:37:59
“但是,如果我们访问app.com/users/create,它将再次通过我们定义的所有路由并返回它找到的第一个匹配项。” - 事实上,它会返回所有找到匹配的路由(全部或部分)。@Chase DeAnda 描述的行为只有在 <Route> 被 <Switch> 标签包围时才会发生。
2021-06-15 23:37:59
如果我们在不同的组件中定义了每个路由,我的意思是/admin//users在 Admin 组件和/admin/users/createRoot 组件中呢?我目前exact遇到这种情况,典型的解决方案无法正常工作。
2021-06-17 23:37:59

简而言之,如果您为应用程序的路由定义了多个路由,则用这样的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路线。

实际上第二部分解释了它。假设您有 2 条路线/motor/motorbike然后您需要exact使用 path放入路线/motor否则,/motorand/motorbike路由都会使用 path 获取组件/motor
2021-06-16 23:37:59

看看这里: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
-----------------