反应:差异<路线准确路径="/"/比;and <Route path="/"/比;

有人能解释一下两者的区别吗

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

而且

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

我不知道exact的意思。

218409 次浏览
小开
最佳答案

在这个例子中，什么都没有。当你有多个路径具有相似的名称时，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>

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

小开

简而言之，如果你为你的应用程序的路由定义了多个路由，包含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，那么你需要为/functions路由使用exact。

小开

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

准确:bool

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

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


/one        /one/two                true        no
/one        /one/two                false       yes
小开

最简短的回答是

请尝尝这个。

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

请尝尝这个。

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

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

这是不使用exact的场景:

主页

地点:/

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

第二个页面

地点:/第二页

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

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

使用准确的:

主页

地点:/

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

第二个页面

地点:/第二页

-----------------
second content
-----------------
小开

如果你为你的应用程序的路由定义了多条路由，并包含了名称相似的routes组件，我们可能会遇到不可预测的行为。

例如:

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

可能会导致一些错误

/users/create

因为一旦react找到一个与regex user*匹配的根，它就会将你重定向到/users路由

像这样使用exact

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

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

如他们的文件所述:

你不需要再使用一个精确的道具了。这是因为默认情况下所有路径都完全匹配。如果你想匹配更多的URL，因为你有子路由，可以像<Route path="users/*">一样使用后面的*


提交答案