useLocation 中的重复路径名问题

问题描述

我正在使用 react 和 react 路由器制作网络。

问题是，useLocation()中的路径名有上一页的记录和当前页的记录。

例如，主屏幕上的“/”和另一个页面上的“/business”页面对比在一起。

此外，如果您刷新 /business 页面并转到“/info”，“/business”和“/info”会一起出现。

如果你看我上面贴的图片，每当有滚动事件发生时，我都会尝试判断pathname（同为url变量）变量是否为'/'，并根据布尔值写逻辑。

>

但是，也有在控制台，在语句中，用旧路径名和当前路径名执行两次的情况。

如果只把url或者url带到控制台，显示的是当前的结果值，但是如果在窗口的滚动事件中提示的话，实际上也带了上一页的历史记录。

有没有人知道解决方案？

解决方法

您可能需要 exact 关键字：

如果为 true，则只有在位置完全匹配时才会应用活动类/样式。

<Switch>
  <Route exact path="/"><Home/></Route>
  <Route exact path="/accounts/login"><Login/></Route>
  <Route exact path="/accounts/profile"><Profile/></Route>
</Switch>

这可能是因为您定义了一个“/”路由，因此 React Router 无法准确解释 URL。

是的，将 prop 应用到每个 Route 可能有点矫枉过正，但它保证没有错误的余地。