时间戳

首页 > 解决方案 > 为什么反应路由器中的默认行为不是“精确”的

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

问题描述

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

在 react router.. 中，我们这样做：

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

这段代码显示了各种奇怪的行为，如果我去/there，组件 Hello 仍然会被渲染。

解决方案是添加一个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 呢？如果他们愿意，允许人们将其设置为 falseexact={false}吗？

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

标签： javascriptreactjsreact-router

解决方案

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

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

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

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

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

推荐阅读