有人能解释一下两者的区别吗
<Route exact path="/" component={Home} />
and
<Route path="/" component={Home} />
我不知道确切是什么意思。
有人能解释一下两者的区别吗
<Route exact path="/" component={Home} />
and
<Route path="/" component={Home} />
我不知道确切是什么意思。
在这个例子中,什么都没有。当你有多个路径具有相似的名称时,精确的参数就会发挥作用:
例如,假设我们有一个显示用户列表的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,它将再次遍历我们定义的所有路由并返回它找到的FIRST匹配。React路由器做部分匹配,所以/users部分匹配/users/create,所以它会错误地再次返回users路由!
exact参数禁用路由的部分匹配,并确保它只在路径与当前url精确匹配时才返回路由。
因此,在这种情况下,我们应该在Users路由中添加exact,这样它只会匹配/ Users:
<Switch>
<Route exact path="/users" component={Users} />
<Route path="/users/create" component={CreateUser} />
</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>
然后你必须把确切的关键字的路由,它的路径也包括在另一个路由的路径。例如,主路径/包含在所有路径中,因此它需要有精确的关键字来与其他以/开头的路径区分开来。原因也类似于/functions路径。如果你想使用另一个路由路径,如/functions-detail或/functions/open-door,其中包含/functions,那么你需要为/functions路由使用exact。
看看这里:https://reacttraining.com/react-router/core/api/Route/exact-bool
准确:bool
当为true时,仅当路径与位置匹配时才匹配。路径名。
**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/*">