反应：和之间的差异

Question

有人能解释一下

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

和

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

我不知道确切的意思。

Answer 1

请看这里：https://reacttraining.com/react-router/core/api/Route/exact-bool

准确：布尔

如果为true，则仅当路径与location.pathname完全匹配时才会匹配。

**path**    **location.pathname**   **exact**   **matches?**

/one        /one/two                true        no
/one        /one/two                false       yes

Answer 2

简而言之，如果您为应用的路由定义了多个路由，并包含了像这样的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关键字添加到该路径，该路径也包含在另一条路径中。例如，主路径/包含在所有路径中，因此它需要有精确的关键字，以区别于以/开头的其他路径。原因也类似于/函数路径。如果您想使用另一个布线路径，如/functions detail或/functions/open-door，其中包含/functions，则需要对/functions布线使用精确的。

Answer 3

在这个例子中，没有什么是真的。当您有多个具有相似名称的路径时，exact参数起作用：

例如，假设我们有一个显示用户列表的Users组件。我们还有一个CreateUser组件，用于创建用户。CreateUsers的url应嵌套在Users下。因此，我们的设置可能如下所示：

<Switch>
  <Route path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

现在，当我们转到http://app.com/users路由器将遍历我们定义的所有路由，并返回找到的第一个匹配项。因此，在这种情况下，它将首先找到用户路由，然后返回它。一切都好。

但是，如果我们转到http://app.com/users/create，它将再次遍历所有已定义的路由，并返回找到的第一个匹配项。React路由器进行部分匹配，因此/users部分匹配/users/create，因此它将再次错误地返回用户路由！

参数禁用路由的部分匹配，并确保仅当路径与当前url精确匹配时才返回路由。

因此，在这种情况下，我们应该向用户路由添加精确，以便它只在/Users上匹配：

<Switch>
  <Route exact path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

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