有人可以解释两者之间的区别
<Route exact path="/" component={Home} />
和
<Route path="/" component={Home} />
我不知道“确切”的含义
有人可以解释两者之间的区别
<Route exact path="/" component={Home} />
和
<Route path="/" component={Home} />
我不知道“确切”的含义
简而言之,如果您为应用程序的路由定义了多个路由,则用这样的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
关键字放入该路径,该路径的路径也包含在另一个路径的路径中。例如/
,所有路径中都包含home路径,因此它需要具有exact
关键字以将其与以开头的其他路径区分开/
。原因也类似于/functions
路径。如果要使用其他路径,例如/functions-detail
或/functions/open-door
其中包含的路径/functions
,则需要使用exact
该/functions
路径。
在这个例子中,什么都没有。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
PARAM禁用部分匹配的路由,并确保如果路径是精确匹配当前URL,它只是返回的路线。
所以在这种情况下,我们应该添加exact
到我们的Users
路由,这样只会匹配/users
:
<Route exact path="/users" component={Users} />
<Route path="/users/create" component={CreateUser} />
确切:布尔
如果为true,则仅在路径
location.pathname
完全匹配时匹配。Take a look here :https://reacttraining.com/react-router/core/api/Route/exact-bool