React:<Route精确路径=“ /” />和<Route path =“ /” />之间的区别

reactjs React.js

小宇宙飞云

2020-03-12

有人可以解释两者之间的区别

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

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

我不知道“确切”的含义

第864篇《React:<Route精确路径=“ /” />和<Route path =“ /” />之间的区别》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
Harry逆天Eva 2020.03.12

确切:布尔

如果为true,则仅在路径location.pathname完全匹配时匹配

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

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

Take a look here :https://reacttraining.com/react-router/core/api/Route/exact-bool

阿飞路易 2020.03.12

简而言之,如果您为应用程序的路由定义了多个路由,则用这样的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关键字放入该路径,该路径的路径也包含在另一个路径的路径中。例如/,所有路径中都包含home路径,因此它需要具有exact关键字以将其与以开头的其他路径区分开/原因也类似于/functions路径。如果要使用其他路径,例如/functions-detail/functions/open-door其中包含的路径/functions,则需要使用exact/functions路径。

猴子宝儿Harry 2020.03.12

在这个例子中,什么都没有。exact当您有多个具有相似名称的路径时,参数即起作用:

例如,假设我们有一个Users显示用户列表的组件。我们还有一个CreateUser用于创建用户组件。的网址CreateUsers应嵌套在下Users因此,我们的设置可能如下所示:

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

现在,这里的问题是,当我们转到http://app.com/users路由器时,将遍历所有定义的路由并返回找到的FIRST匹配项。因此,在这种情况下,它将首先找到Users路线,然后返回。都好。

但是,如果我们转到http://app.com/users/create,它将再次遍历所有定义的路线并返回找到的FIRST匹配项。React路由器会进行部分匹配,因此会/users部分匹配/users/create,因此它将再次错误地返回Users路由!

exactPARAM禁用部分匹配的路由,并确保如果路径是精确匹配当前URL,它只是返回的路线。

所以在这种情况下,我们应该添加exact到我们的Users路由,这样只会匹配/users

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

该文档exact详细解释并给出了其他示例。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android