的activeStyle不起作用(activeStyle of doesn't work)

的activeStyle不起作用(activeStyle of doesn't work)

我为创建导航菜单使用标签，但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>