reactjs - react : difference between and

Question

谁能解释一下两者的区别

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

和

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

我不知道确切的含义。

Answer 1

在这个例子中，什么也没有。当您有多个具有相似名称的路径时，exact 参数就会发挥作用:

例如，假设我们有一个显示用户列表的Users组件。我们还有一个用于创建用户的 CreateUser 组件。 CreateUsers 的 url 应嵌套在 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>

The docs explain exact in detail and give other examples.

更新 2023 正如用户 smit-gabani 所指出的

新版本的react-v6不再支持exact了。

正如他们的文档中所述:

You don't need to use an exact prop on anymore. This is because allpaths match exactly by default. If you want to match more of the URLbecause you have child routes use a trailing * as in