为什么不“精确”反应路由器中的默认行为

Question

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

在react router ..中，我们要进行路由：

<BrowserRouter>
    <Route path='/' component={Hello} />
    <Route path='/there' component={There} />
</BrowserRouter>

这段代码显示了各种奇怪的行为，如果我去过/there，该组件Hello WOULD仍将呈现。

解决方案是添加一个switch组件，并从最具体的位置对Route组件重新排序。这似乎非常荒谬，尤其是当有人来自后端背景时。为什么我需要重新排列路线？另外，即使添加了开关，奇怪的行为仍然存在。例如，任何以/therelike 开头的路线/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设置为true？并允许人们将其设置为false（如果他们愿意）exact={false}？

我有什么想念的吗？我试图寻找这个问题，但没有找到答案。他们只是在文档中提到，确切的默认值为false，没有任何进一步的解释

Answer 1

这是因为React-router 的理念是成为“动态”路由器。您对react-router的期望通常是“静态”路由器的默认行为。

在react-router中，Route组件只是检查URL，如果匹配（URL以 开头path），那么它将渲染传递的组件。例如，当您想要根据 URL 有条件地呈现页面的一部分时，它非常有用。

当您只需要根据 URL 渲染其中一个组件时（与javascript 相同），使用Switch组件是定义应用程序主路由的正确方法。switch但为什么exactprop 不是true默认的呢？假设您有以下页面：

• 家： /
• X: /x
  • XA：/x/a
  • XB：/x/b
• 是：/y
  • yc：/y/c

在这种情况下（这在大型应用程序中并不罕见），您只需在主组件中定义 、Home、X和Y页面，而在X和Y组件上，您可以定义其相应的子路由。