reactjs 反应：<Route 精确路径="/" /> 和 <Route path="/" /> 之间的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49162311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React : difference between <Route exact path="/" /> and <Route path="/" />
提问by batt
Someone can explain the difference between
有人可以解释两者之间的区别
<Route exact path="/" component={Home} />
and
和
<Route path="/" component={Home} />
I don't know the meaning of 'exact'
我不知道“精确”是什么意思
回答by Chase DeAnda
In this example, nothing really. The exactparam comes into play when you have multiple paths that have similar names:
在这个例子中，什么都没有。exact当您有多个具有相似名称的路径时，该参数就会发挥作用：
For example, imagine we had a Userscomponent that displayed a list of users. We also have a CreateUsercomponent that is used to create users. The url for CreateUsersshould be nested under Users. So our setup could look something like this:
例如，假设我们有一个Users显示用户列表的组件。我们还有一个CreateUser用于创建用户的组件。的 urlCreateUsers应该嵌套在Users. 所以我们的设置看起来像这样：
<Route path="/users" component={Users} />
<Route path="/users/create" component={CreateUser} />
Now the problem here, when we go to http://app.com/usersthe router will go through all of our defined routes and return the FIRST match it finds. So in this case, it would find the Usersroute first and then return it. All good.
现在的问题是，当我们转到http://app.com/users路由器时，将遍历我们定义的所有路由并返回它找到的第一个匹配项。所以在这种情况下，它会先找到Users路由，然后返回它。都好。
But, if we went to http://app.com/users/create, it would again go through all of our defined routes and return the FIRST match it finds. React router does partial matching, so /userspartially matches /users/create, so it would incorrectly return the Usersroute again!
但是，如果我们转到http://app.com/users/create，它将再次通过我们定义的所有路由并返回它找到的第一个匹配项。React 路由器做部分匹配，所以/users部分匹配/users/create，所以它会Users再次错误地返回路由！
The exactparam disables the partial matching for a route and makes sure that it only returns the route if the path is an EXACT match to the current url.
该exact参数禁用路由的部分匹配，并确保仅在路径与当前 url 完全匹配时才返回路由。
So in this case, we should add exactto our Usersroute so that it will only match on /users:
所以在这种情况下，我们应该添加exact到我们的Users路由中，以便它只匹配/users：
<Route exact path="/users" component={Users} />
<Route path="/users/create" component={CreateUser} />
回答by milkersarac
In short, if you have multiple routes defined for your app's routing, enclosed with Switchcomponent like this;
简而言之，如果您为应用程序的路由定义了多个路由，则用这样的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>
Then you have to put exactkeyword to the Route which it's path is also included by another Route's path. For example home path /is included in all paths so it needs to have exactkeyword to differentiate it from other paths which start with /. The reason is also similar to /functionspath. If you want to use another route path like /functions-detailor /functions/open-doorwhich includes /functionsin it then you need to use exactfor the /functionsroute.
然后，您必须将exact关键字放在Route 中，它的路径也包含在另一个 Route 的路径中。例如主路径/包含在所有路径中，因此它需要有exact关键字以将其与其他以/. 原因也类似于/functions路径。如果您想使用其他路线路径，例如/functions-detail或/functions/open-door其中包含的路线/functions，则需要使用exact该/functions路线。
回答by Nouar
exact: bool
精确：布尔
When true, will only match if the path matches the location.pathnameexactly.
当为 true 时，仅当路径location.pathname完全匹配时才匹配。
**path** **location.pathname** **exact** **matches?**
/one /one/two true no
/one /one/two false yes
Take a look here :https://reacttraining.com/react-router/core/api/Route/exact-bool
看看这里：https: //reacttraining.com/react-router/core/api/Route/exact-bool
