NavLink 精确道具不适用于 react-router-dom 6答案

【问题标题】：NavLink exact prop not working for react-router-dom 6NavLink 精确道具不适用于 react-router-dom 6
【发布时间】：2020-11-06 16:39:44
【问题描述】：

我正在使用

    "react-router": "^6.0.0-beta.0",
    "react-router-dom": "^6.0.0-beta.0",

我现在面临的 react-router-dom 的 NavLink 问题是根路径“/”始终处于活动状态，其他路径没有问题，并且它们在切换期间处于活动状态和非活动状态，它只是根路径给我带来麻烦的路径，我已经搜索并尝试了许多解决方案。但没有任何效果。同时使用“exact”和“exact={true}”，但没有成功。

用过这个：

<NavLink
          className="iconContainer"
          exact={true}
          to="/"
          activeClassName="isActive"
        >
          <span className="menu-title">Home</span>
        </NavLink>

还有这个：


<NavLink
          className="iconContainer"
          exact
          to="/"
          activeClassName="isActive"
        >
          <span className="menu-title">Home</span>
        </NavLink>

过去两天我一直陷入这种情况，但仍然没有成功找到任何解决方案。任何帮助将不胜感激，谢谢

编辑：我的路线

<Routes>
 
                <Route
                    exact
                    path="order/:orderId"
                    element={<OrderDetails />}
                ></Route>
                <Route
                    exact
                    path="orders"
                    element={<Orders />}
                ></Route>
                <Route
                    exact
                    path="/"
                    element={<Home />}
                ></Route>

                
      </Routes>

【问题讨论】：

你需要传递另一个 props：strict={true} 或者只是 strict reactrouter.com/web/api/NavLink/strict-bool
我可以看看路线代码吗，你可能错过了 pah 或类似的东西。
@Satyam 也添加了路线。请检查！
@Freestyle09 已经用过，没用。
尝试只使用Link 而不是NavLink

标签： reactjs react-router react-router-dom

【解决方案1】：

Exact 参数将不再适用于 NavLink 组件。在版本 6 Beta 中，他们包含了一个名为：end

的新参数

使用这种简单的方法，您只需将NavLink 组件的end 参数和exact 传递给您Route

<NavLink end to="/">
      Go to Home
    </NavLink>

当您编写 end="another-class-active" 时，您可以更改您的活动类名，默认为 active。

工作示例： https://codesandbox.io/s/still-moon-obrz3?file=/src/App.js:228-288

请注意，这仍然是测试版，因此我们需要等待一些修复和正式发布

【讨论】：

将exact strict 添加到路由并将end 添加到NavLink 有效！

【解决方案2】：

在 6.0.2 中，您可以将一个函数传递给 className，该函数会获得一组 props。其中一个道具是“isActive”。这是我为 OP 代码解决它的方法：

<NavLink
    className={(props) => {
      return `${props.isActive ? 'isActive ' : ''}iconContainer`;
    }}
    end
    to="/"
  >
    <span className="menu-title">Home</span>
</NavLink>

另请注意，“活动”类是由导航链接。

还要注意 end 的使用：“如果使用了 end 属性，它将确保该组件在其后代路径匹配时不匹配为“活动”。例如，渲染一个仅在以下位置活动的链接网站根目录，而不是任何其他 URL"

【讨论】：

【解决方案3】：

但是我是这样做的，你不必在NavLink的情况下使用exact ，正如官方文档LINK TO THE DOCS所说的那样

   <NavLink to="/service" className='turner'>
      Services
   </NavLink>

【讨论】：