[英]NavLink exact prop not working for react-router-dom 6
I am currently using我目前正在使用
"react-router": "^6.0.0-beta.0",
"react-router-dom": "^6.0.0-beta.0",
The problem with NavLink of react-router-dom that i am facing now is that the root path "/" is always active, other paths are of no problem and they are being active and inactive during toggle, its just the root path that is giving me trouble, i have searched and tried many solutions.我现在面临的 react-router-dom 的 NavLink 的问题是根路径“/”始终处于活动状态,其他路径没有问题,并且它们在切换期间处于活动状态和非活动状态,它只是根路径给我带来麻烦,我已经搜索并尝试了许多解决方案。 but nothing worked.
但没有任何效果。 Use "exact" and "exact={true}" both, but no success.
同时使用“exact”和“exact={true}”,但没有成功。
Used this:用了这个:
<NavLink
className="iconContainer"
exact={true}
to="/"
activeClassName="isActive"
>
<span className="menu-title">Home</span>
</NavLink>
and Also this:还有这个:
<NavLink
className="iconContainer"
exact
to="/"
activeClassName="isActive"
>
<span className="menu-title">Home</span>
</NavLink>
I have been stuck in this situation for past two days, and still no success in finding any solution.过去两天我一直陷入这种情况,但仍然没有成功找到任何解决方案。 Any help will be appreciated, thanks
任何帮助将不胜感激,谢谢
Edit: My routes编辑:我的路线
<Routes>
<Route
exact
path="order/:orderId"
element={<OrderDetails />}
></Route>
<Route
exact
path="orders"
element={<Orders />}
></Route>
<Route
exact
path="/"
element={<Home />}
></Route>
</Routes>
Exact param will no longer working on NavLink component. Exact 参数将不再适用于 NavLink 组件。 In version 6 Beta they have included a new param called:
end
在版本 6 Beta 中,他们包含了一个名为:
end
With this simply approach you just need to pass end
param for your NavLink
component and exact
to you Route
使用这种简单的方法,您只需为您的
NavLink
组件传递end
参数并exact
地传递给您Route
<NavLink end to="/">
Go to Home
</NavLink>
When you write
end="another-class-active"
you can change your active className which is
active
by default.
当您编写
end="another-class-active"
active
,您可以更改默认处于活动状态的活动类名。
As @Greg Wozniak mentioned end is a boolean so you can't change active class name with this, instead of this you can pass a function to className:正如@Greg Wozniak 提到的 end 是一个布尔值,所以你不能用这个改变活动的类名,而不是这个你可以将一个函数传递给 className:
className={({ isActive }) =>
isActive ? 'activeClassName' : undefined
}
For more information read this: https://reactrouter.com/docs/en/v6/api#navlink有关更多信息,请阅读: https ://reactrouter.com/docs/en/v6/api#navlink
Working example: https://codesandbox.io/s/vigorous-thompson-e7k8eb工作示例: https ://codesandbox.io/s/vigorous-thompson-e7k8eb
Note that this is still version Beta so we need to wait for some fixes and official releases
请注意,这仍然是 Beta 版本,因此我们需要等待一些修复和正式发布
In 6.0.2 you can pass a function to className and that function gets a set of props.在 6.0.2 中,您可以将一个函数传递给 className,该函数会获得一组道具。 One of those props is "isActive".
其中一个道具是“isActive”。 Here is how I solved it for the OP code:
这是我为 OP 代码解决它的方法:
<NavLink
className={(props) => {
return `${props.isActive ? 'isActive ' : ''}iconContainer`;
}}
end
to="/"
>
<span className="menu-title">Home</span>
</NavLink>
Also note that the class "active" is automatically set by the NavLink.另请注意,“活动”类是由 NavLink 自动设置的。
Also note the use of end: "If the end prop is used, it will ensure this component isn't matched as "active" when its descendant paths are matched. For example, to render a link that is only active at the website root and not any other URLs"还要注意 end 的使用:“如果使用了 end 属性,它将确保该组件在其后代路径匹配时不匹配为“活动”。例如,呈现仅在网站根目录处活动的链接而不是任何其他 URL”
However this how I did it, you don't have to use exact in the case of NavLink
as said by the official docs, LINK TO THE DOCS但是,我是这样做的,您
NavLink
像官方文档LINK TO THE DOCS所说的那样在 NavLink 的情况下使用精确
<NavLink to="/service" className='turner'>
Services
</NavLink>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.