有人能解释一下
<Route exact path="/" component={Home} />
以及
<Route path="/" component={Home} />
我不知道exact的意思。
exact
arknldoa1#
在这个例子中,实际上没有什么。当你有多个路径有相似的名字时,exact参数就起作用了:例如,假设我们有一个显示用户列表的Users组件,还有一个用于创建用户的CreateUser组件,CreateUsers的url应该嵌套在Users之下,那么我们的设置如下所示:
Users
CreateUser
CreateUsers
<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:
http://app.com/users
http://app.com/users/create
/users
/users/create
<Switch> <Route exact path="/users" component={Users} /> <Route path="/users/create" component={CreateUser} /> </Switch>
The docs explain exact in detail and give other examples.
nhjlsmyf2#
简而言之,如果您为应用的路由定义了多条路由,请使用Switch组件封装,如下所示:
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,那么您需要为/functions路由使用exact。
/
/functions
/functions-detail
/functions/open-door
snz8szmq3#
看看这里:https://reacttraining.com/react-router/core/api/Route/exact-bool
为true时,仅当路径与location.pathname完全匹配时才匹配。
location.pathname
**path** **location.pathname** **exact** **matches?** /one /one/two true no /one /one/two false yes
kninwzqo4#
例如:
<Routes> <Route path="/users" component={Users} /> <Route path="/users/create" component={CreateUser} /> </Routes>
当您转到路径时,可能会出现一些错误
因为一旦react找到与regex用户 * 匹配的根,它就会将您重定向到/users路径就像这样
如其文件所述:
<Route path="users/*">
ygya80vv5#
我更新版本的React Router DOM、开关和组件可能不起作用。请使用路由代替开关,使用元素代替组件。我在使用组件时遇到了问题。
n6lpvg4x6#
通过使用exact,可以确保主页组件的内容不会出现在其他页面上。
主页地点:/
----------------- homepage content -----------------
第二页位置:/第二页
----------------- homepage content ----------------- ----------------- second content -----------------
==========================================
----------------- second content -----------------
xzlaal3s7#
请试试这个
<Router> <div> <Route exact path="/" component={Home} /> <Route path="/news" component={NewsFeed} /> </div> </Router>
vc6uscn98#
请试试这个。
<switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/shop" component={Shop} /> </switch>
8条答案
按热度按时间arknldoa1#
在这个例子中,实际上没有什么。当你有多个路径有相似的名字时,
exact
参数就起作用了:例如,假设我们有一个显示用户列表的
Users
组件,还有一个用于创建用户的CreateUser
组件,CreateUsers
的url应该嵌套在Users
之下,那么我们的设置如下所示:现在的问题是,当我们转到
http://app.com/users
时,路由器将遍历我们定义的所有路由,并返回它找到的第一个匹配。因此,在本例中,它将首先找到Users
路由,然后返回它。一切正常。但是,如果我们转到
http://app.com/users/create
,它会再次遍历所有定义的路由并返回找到的第一个匹配。React路由器执行部分匹配,因此/users
部分匹配/users/create
,所以它会再次错误地返回Users
路由!exact
参数禁用路由的部分匹配,并确保仅当路径与当前url完全匹配时才返回路由。因此,在本例中,我们应该将
exact
添加到Users
路由中,以便它只匹配/users
:The docs explain
exact
in detail and give other examples.nhjlsmyf2#
简而言之,如果您为应用的路由定义了多条路由,请使用
Switch
组件封装,如下所示:然后你必须把
exact
关键字的路径,它的路径也包括在另一个路由的路径。例如,主路径/
是包括在所有路径,所以它需要有exact
关键字,以区分它与其他路径开始/
。原因也类似于/functions
路径。如果您想使用另一个路由路径,如/functions-detail
或/functions/open-door
,其中包括/functions
,那么您需要为/functions
路由使用exact
。snz8szmq3#
看看这里:https://reacttraining.com/react-router/core/api/Route/exact-bool
为true时,仅当路径与
location.pathname
完全匹配时才匹配。kninwzqo4#
例如:
当您转到路径时,可能会出现一些错误
因为一旦react找到与regex用户 * 匹配的根,它就会将您重定向到/users路径
就像这样
exact
。**如其文件所述:
<Route path="users/*">
中所示ygya80vv5#
我更新版本的React Router DOM、开关和组件可能不起作用。请使用路由代替开关,使用元素代替组件。我在使用组件时遇到了问题。
n6lpvg4x6#
通过使用exact,可以确保主页组件的内容不会出现在其他页面上。
主页
地点:/
第二页
位置:/第二页
==========================================
主页
地点:/
第二页
位置:/第二页
xzlaal3s7#
请试试这个
vc6uscn98#
请试试这个。