反应:之间的差异<路由精确路径=“/”/>及<路由路径=“/”/>

有人能解释一下两者的区别吗

<路线精确路径=“路径”/&引用;组件={Home}/>

<路由路径=“路径”/&引用;组件={Home}/>

我不知道“精确”的意思

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

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

<开关>
<路由路径=“/users”组件={users}/>
<路由路径=“/users/create”组件={CreateUser}/>
&lt/开关>

现在,当我们转到http://app.com/users路由器将遍历我们定义的所有路由,并返回找到的第一个匹配项。因此,在这种情况下,它将首先找到用户路由,然后返回它。一切都好

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

exact参数禁用路由的部分匹配,并确保仅当路径与当前url完全匹配时才返回路由

因此,在这种情况下,我们应该向用户路由添加精确,以便它只在/Users上匹配:

<开关>
<路由精确路径=“/users”组件={users}/>
<路由路径=“/users/create”组件={CreateUser}/>
&lt/开关>

这些文档详细解释了exact,并给出了其他示例

发表评论