我真的很惊讶以前没有问过这个问题。这或者我以一种奇怪的方式问。
在 react router.. 中,我们这样做:
<BrowserRouter>
<Route path='/' component={Hello} />
<Route path='/there' component={There} />
</BrowserRouter>
如果我转到
/there
,此代码会显示各种奇怪的行为,组件 Hello 仍然会被渲染。解决方案是添加
switch
组件并从最具体的组件重新排序 Route 组件。这似乎非常荒谬,尤其是作为来自后端背景的人。为什么我需要重新排序我的路线?另外,即使添加了开关,仍然存在奇怪的行为。例如任何以
/there
开头的路线喜欢 /there/was/a/time
仍然匹配更好的最优解是把
exact
在这样的 Route 组件上:<BrowserRouter>
<Route exact path='/' component={Hello} />
<Route exact path='/there' component={There} />
</BrowserRouter>
与任何其他正常框架一样,此行为提供正常的预期结果。前往
website.com/there
或 website.com/there/
渲染 There
零件。并前往 website.com
或 website.com/
渲染 Hello
我认为任何网站中的大多数路由都更适合
exact
.那么为什么不默认设置为 true 呢?并允许人们在喜欢 exact={false}
时将其设置为 false ?有什么我想念的吗?我试图寻找这个问题,但没有找到答案。在他们刚刚提到的文档中,exact 的默认值为 false,没有任何进一步的解释
最佳答案
这是因为react-router's philosophy成为“动态”路由器。你对 react-router 的期望通常是“静态”路由器的默认行为。
在 react-router 中,Route
组件只是检查 URL,如果匹配(URL 以 path
开头),那么它将呈现传递的组件。例如,当您想根据 URL 有条件地呈现页面的一部分时,它很有用。
使用 Switch
组件是定义应用程序主要路由的正确方法,并且当您只需要基于 URL 呈现组件之一时(与 JavaScript 中的 switch
相同)。但是为什么 exact
Prop 不是 true
默认?假设您有以下页面:
在这种情况下(这在大型应用程序中并不少见),您只需定义
Home
, X
, 和 Y
您的主要组件中的页面,以及 X
和 Y
组件,你可以定义它们对应的子路由。
关于javascript - 为什么 "exact"不是 react 路由器中的默认行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50911799/