Question

有人可以解释

之间的区别

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

和

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

我不知道'确切'的含义

Answer 1

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

例如，假设我们有一个显示用户列表的Users组件。我们还有一个CreateUser组件，用于创建用户。 CreateUsers的网址应嵌套在Users下。所以我们的设置看起来像这样：

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

现在问题在于，当我们转到http://app.com/users时，路由器将遍历所有已定义的路由并返回它找到的FIRST匹配。所以在这种情况下，它会首先找到Users路由，然后返回它。一切都好。

但是，如果我们前往http://app.com/users/create，它将再次通过我们所有已定义的路线并返回它找到的FIRST匹配。 React路由器进行部分匹配，因此/users部分匹配/users/create，因此会错误地再次返回Users路由！

exact参数禁用路径的部分匹配，并确保它只返回路径，如果路径与当前网址完全匹配。

因此，在这种情况下，我们应该将exact添加到Users路由中，以便它只匹配/users：

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

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关键字放入该路径，该路径的路径也包含在另一个路径的路径中。例如，所有路径中都包含主路径/，因此它需要具有exact关键字才能将其与以/开头的其他路径区分开。原因也类似于/functions路径。如果您想使用/functions-detail或/functions/open-door之类的其他路由路径，其中包含/functions，则需要对exact路由使用/functions。

Answer 3

答案都很好。但是，可能会有一个疑问，例如“为什么我们不能为所有路线都设置exact？”想象一下这样的URL。 https://yourreactwebsite.com/getUsers/userId=? 这是一个示例，其中用户ID将动态地输入到URL中，因此我们不能在此处使用路由器中的exact prop。

Answer 4

精确：布尔值

为true时，仅在路径与location.pathname完全匹配时才会匹配。

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

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

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

Answer 5

请试试这个。

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

Answer 6

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

这是没有使用精确的场景：

主页

位置：/

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

第二页

位置：/第二页

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

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

使用精确：

主页

位置：/

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

第二页

位置：/第二页

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

Answer 7

最短的答案是

请尝试这个。

let newArray = arr.filter(callback(element, index, array), thisArg)

React：<route exact =“”path =“/”>和<route path =“/”>之间的差异

7 个答案: