CODEWITHSUNDEEP
reactjs
Roberto
Roberto

Reputation: 1395

activeStyle of <NavLink/> doesn't work

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"

Upvotes: 0

Views: 1002

Answers (1)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

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>

Upvotes: 1

Related Questions