javascript - 为什么 "exact"不是 react 路由器中的默认行为

Question

我真的很惊讶以前没有问过这个问题。这或者我以一种奇怪的方式问。

在 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，没有任何进一步的解释

Answer 1

这是因为react-router's philosophy成为“动态”路由器。你对 react-router 的期望通常是“静态”路由器的默认行为。
在 react-router 中，Route组件只是检查 URL，如果匹配(URL 以 path 开头)，那么它将呈现传递的组件。例如，当您想根据 URL 有条件地呈现页面的一部分时，它很有用。
使用 Switch组件是定义应用程序主要路由的正确方法，并且当您只需要基于 URL 呈现组件之一时(与 JavaScript 中的 switch 相同)。但是为什么 exact Prop 不是 true默认？假设您有以下页面:

主页:/

X:/x

XA:/x/a

XB:/x/b

是:/是

YC:/y/c

在这种情况下(这在大型应用程序中并不少见)，您只需定义 Home , X , 和 Y您的主要组件中的页面，以及 X和 Y组件，你可以定义它们对应的子路由。