reactjs React:〈路径精确路径="/”/>和< Route path="/" />

nfg76nw0  于 2023-01-17  发布在  React
关注(0)|答案(8)|浏览(161)

有人能解释一下

<Route exact path="/" component={Home} />

以及

<Route path="/" component={Home} />

我不知道exact的意思。

arknldoa

arknldoa1#

在这个例子中,实际上没有什么。当你有多个路径有相似的名字时,exact参数就起作用了:
例如,假设我们有一个显示用户列表的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,它会再次遍历所有定义的路由并返回找到的第一个匹配。React路由器执行部分匹配,因此/users部分匹配/users/create,所以它会再次错误地返回Users路由!
exact参数禁用路由的部分匹配,并确保仅当路径与当前url完全匹配时才返回路由。
因此,在本例中,我们应该将exact添加到Users路由中,以便它只匹配/users

<Switch>
  <Route exact path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

The docs explain exact in detail and give other examples.

nhjlsmyf

nhjlsmyf2#

简而言之,如果您为应用的路由定义了多条路由,请使用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>

然后你必须把exact关键字的路径,它的路径也包括在另一个路由的路径。例如,主路径/是包括在所有路径,所以它需要有exact关键字,以区分它与其他路径开始/。原因也类似于/functions路径。如果您想使用另一个路由路径,如/functions-detail/functions/open-door,其中包括/functions,那么您需要为/functions路由使用exact

snz8szmq

snz8szmq3#

看看这里:https://reacttraining.com/react-router/core/api/Route/exact-bool

    • 精确值:布尔值**

为true时,仅当路径与location.pathname完全匹配时才匹配。

**path**    **location.pathname**   **exact**   **matches?**

/one        /one/two                true        no
/one        /one/two                false       yes
kninwzqo

kninwzqo4#

    • 如果您为应用的路径选择定义了多条路径,并且包含名称相似的路径组件,则可能会出现不可预测的行为。**

例如:

<Routes>
  <Route path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Routes>

当您转到路径时,可能会出现一些错误

/users/create

因为一旦react找到与regex用户 * 匹配的根,它就会将您重定向到/users路径
就像这样

<Switch>
  <Route exact path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>
    • 新版react-v6不再支持exact。**

如其文件所述:

    • 您不再需要对使用精确属性。这是因为默认情况下所有路径都完全匹配。**如果您因为具有子路由而希望匹配URL的更多部分,请使用尾随 *,如<Route path="users/*">中所示
ygya80vv

ygya80vv5#

我更新版本的React Router DOM、开关和组件可能不起作用。请使用路由代替开关,使用元素代替组件。我在使用组件时遇到了问题。

n6lpvg4x

n6lpvg4x6#

通过使用exact,可以确保主页组件的内容不会出现在其他页面上。

    • 这是未使用exact:**的情况

主页
地点:/

-----------------
homepage content
-----------------

第二页
位置:/第二页

-----------------
homepage content
-----------------
-----------------
second content
-----------------

==========================================

    • 使用精确:**

主页
地点:/

-----------------
homepage content
-----------------

第二页
位置:/第二页

-----------------
second content
-----------------
xzlaal3s

xzlaal3s7#

请试试这个

<Router>
          <div>
            <Route exact path="/" component={Home} />
            <Route path="/news" component={NewsFeed} />
          </div>
        </Router>
vc6uscn9

vc6uscn98#

    • 最短的答案是**

请试试这个。

<switch>
   <Route exact path="/" component={Home} />
   <Route path="/about" component={About} />
   <Route path="/shop" component={Shop} />
 </switch>

相关问题