我为创建导航菜单使用标签,但activeStyle属性不会更改所选链接的背景颜色:
我尝试实现React和Redux手册(第289页)中的示例
const selectedStyle = { backgroundColor: "white", color: "slategray" } export const MainMenu = () => <nav className="main-menu"> <NavLink to="/"> <HomeIcon/> </NavLink> <NavLink to="about" activeStyle={selectedStyle}> [About] </NavLink> <NavLink to="events" activeStyle={selectedStyle}> [Events] </NavLink> <NavLink to="products" activeStyle={selectedStyle}> [Products] </NavLink> <NavLink to="contact" activeStyle={selectedStyle}> [Contact Us] </NavLink> </nav>来自“react-router-dom”
I use tag for creationg navigation menu, but activeStyle attribute doesn't change background color of selected link:
I try to implement example from React and Redux book, page 289
const selectedStyle = { backgroundColor: "white", color: "slategray" } export const MainMenu = () => <nav className="main-menu"> <NavLink to="/"> <HomeIcon/> </NavLink> <NavLink to="about" activeStyle={selectedStyle}> [About] </NavLink> <NavLink to="events" activeStyle={selectedStyle}> [Events] </NavLink> <NavLink to="products" activeStyle={selectedStyle}> [Products] </NavLink> <NavLink to="contact" activeStyle={selectedStyle}> [Contact Us] </NavLink> </nav>is from "react-router-dom"
最满意答案
只有当位置完全匹配时才会应用活动类/样式
将exact属性与每个NavLink放在NavLink 。
您已经定义/路由哪个成功映射到每个NavLink路径路径。因此,没有确切的路径匹配。应用了高级没有activeStyle 。
<NavLink to="/" exact> <HomeIcon/> </NavLink> <NavLink to="/about" exact activeStyle={selectedStyle}> [About] </NavLink> <NavLink to="/events" exact activeStyle={selectedStyle}> [Events] </NavLink>active class/style will only be applied if the location is matched exactly
put exact attribute with every NavLink.
You have define / route which getting successfully mapped against each NavLink route path.So,there is no exact route matching.Hense noactiveStyle applied.
<NavLink to="/" exact> <HomeIcon/> </NavLink> <NavLink to="/about" exact activeStyle={selectedStyle}> [About] </NavLink> <NavLink to="/events" exact activeStyle={selectedStyle}> [Events] </NavLink>更多推荐
activeStyle,selectedStyle,const,电脑培训,计算机培训,IT培训"/> <meta name=&qu
发布评论