反应：<Route exact path="/" /> 和 <Route path="/" /> 之间的区别

Question

谁能解释一下

之间的区别

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

和

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

我不知道exact的意思。

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 时，路由器将遍历我们定义的所有路由和 return 它找到的第一个匹配项。所以在这种情况下，它会先找到 Users 路由，然后再找到 return 路由。一切顺利。

但是，如果我们去 http://app.com/users/create，它会再次遍历我们定义的所有路由和 return 它找到的第一个匹配项。 React 路由器进行部分匹配，因此 /users 部分匹配 /users/create，因此它会再次错误地 return Users 路由！

exact 参数禁用路由的部分匹配，并确保如果路径与当前 url 完全匹配，它只会 return 路由。

所以在这种情况下，我们应该将 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.

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 关键字放在它的路径也包含在另一个 Route 的路径中的 Route 中。例如 home 路径 / 包含在所有路径中，因此它需要有 exact 关键字来区别于其他以 / 开头的路径。原因也类似于/functions路径。如果你想使用另一个路由路径，如 /functions-detail 或 /functions/open-door 其中包含 /functions 那么你需要使用 exact 作为 /functions 路由。

Answer 3

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

Answer 4

最短的答案是

请试试这个。

<switch>
   <Route exact path="/" component={Home} />
   <Route path="/about" component={About} />
   <Route path="/shop" component={Shop} />
 </switch>

Answer 5

请试试这个。

       <Router>
          <div>
            <Route exact path="/" component={Home} />
            <Route path="/news" component={NewsFeed} />
          </div>
        </Router>

Answer 6

通过使用exact，可以保证首页组件的内容不会出现在其他页面上。

这是没有使用exact的场景：

首页

位置：/

-----------------
homepage content
-----------------

第二页

位置：/第二页

-----------------
homepage content
-----------------
-----------------
second content
-----------------

==========================================

使用精确：

首页

位置：/

-----------------
homepage content
-----------------

第二页

位置：/第二页

-----------------
second content
-----------------

反应：<Route exact path="/" /> 和 <Route path="/" /> 之间的区别

React : difference between <Route exact path="/" /> and <Route path="/" />

reactjs

react-router

react-router-dom