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

Question

我目前正在使用

    "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>

Answer 1

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

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

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

当您编写时，end="another-class-active"您可以更改active默认情况下的活动 className 。

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

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