如何在 react-router 自定义 link 上添加悬停效果？

Question

我正在使用反应路由器自定义 link 来突出显示导航栏中的活动 path/link 并且一切正常。但是我不能在那些 link 上添加悬停效果。我使用 .nav-link a:hover 并尝试添加一些样式，但它不起作用。


    const CustomLink = ({ children, to, ...props }) => {
        let resolved = useResolvedPath(to);
        let match = useMatch({ path: resolved.pathname, end: true });
    
        return (
            <div className="nav-link">
                <Link
                    style={{
                        textDecoration: match ? "underline" : "none",
                        color: match ? "#FDC300" : "white",
                        fontWeight: match ? 500 : 400
                    }}
                    to={to}
                    {...props}
                >
                    {children}
                </Link>
            </div>
        );
    };
    
    export default CustomLink;

Answer 1

不要通过 style 属性设置它们的样式，因为它比任何 css 规则都具有更高的特异性（除非您诉诸 !important ).

只需添加一个class表示它已激活。

    const CustomLink = ({ children, to, ...props }) => {
        let resolved = useResolvedPath(to);
        let match = useMatch({ path: resolved.pathname, end: true });
        const linkClassNames = match ? 'active' : '';
        return (
            <div className=`nav-link ${linkClassNames}`>
                <Link
                    to={to}
                    {...props}
                >
                    {children}
                </Link>
            </div>
        );
    };
    
    export default CustomLink;

.nav-link a {
  text-decoration: none;
  color: white;
  font-weight: 400;
}

.nav-link.active a {
  text-decoration: underline;
  color: #FDC300;
  font-weight: 500;
}

但是您可以使用支持此

的NavLink组件（由反应路由器提供）

<NavLink
  to="wherever you want"
  className={({ isActive }) =>
    isActive ? 'nav-link active' : 'nav-link'
  }
>
   your link text here
</NavLink>

如何在 react-router 自定义 link 上添加悬停效果？

How can I add hover effect on react-router custom link?

reactjs

react-router