繁体   English   中英

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

[英]NavLink exact prop not working for react-router-dom 6

我目前正在使用

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

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

使用这种简单的方法,您只需为您的NavLink组件传递end参数并exact地传递给您Route

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

当您编写 end="another-class-active" active ,您可以更改默认处于活动状态的活动类名。

正如@Greg Wozniak 提到的 end 是一个布尔值,所以你不能用这个改变活动的类名,而不是这个你可以将一个函数传递给 className:

className={({ isActive }) =>
    isActive ? 'activeClassName' : undefined
}

有关更多信息,请阅读: https ://reactrouter.com/docs/en/v6/api#navlink

工作示例: https ://codesandbox.io/s/vigorous-thompson-e7k8eb

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

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

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

另请注意,“活动”类是由 NavLink 自动设置的。

还要注意 end 的使用:“如果使用了 end 属性,它将确保该组件在其后代路径匹配时不匹配为“活动”。例如,呈现仅在网站根目录处活动的链接而不是任何其他 URL”

但是,我是这样做的,NavLink像官方文档LINK TO THE DOCS所说的那样在 NavLink 的情况下使用精确

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM