MENU

<NavLink>

<NavLink> is a special version of <Link> that styles the rendered element with CSS when it matches the current URL.

Attributes:

to: String

the destination URL.

activeClassName: String

the class to give the element when it is active.

The default give class is active .

activeStyle: CSS Object

the styles to apply when it is active.

exact: bool

whether to apply styling only when the location matches exactly. If false, "/a" matches "a/b/c".

str i ct: bool

whether to consider the trailing slash on a location's pathname. If false, "/a" matches "/a/".

isActive (match, location): function

the logic that determines whether the link is active.

location: object

the location used to compare for the 'isActive' function.

aria-current: one of the following values for accessibility.

“page”: a link within a set of pagination links.

“step”: a link within a step indicator for a step-based process.

“location”: the image visually highlighted as the current

component of a flow chart.

“date”: the current date within a calendar.

“time”: the current date within a timetable

“true”: indication that the NavLink is active

“false”: prevent assistive technologies from reacting to a

current link. (a use case would be to prevent

multiple aria-current tags on a single page).

<NavLink to="/events/123"
               exact strict
               activeStyle={{fontWeight: "bold", color: "red"}} isActive={(match, location) => {
   if (!match) return false;  // only consider an event active if its event id is an odd number
   const eventID = parseInt(match.params.eventID);
     return !isNaN(eventID) && eventID % 2 === 1;
               }}>
     Event 123</NavLink>

<NavLink to="/events/123"
               exact strict
               activeStyle={{fontWeight: "bold", color: "red"}} isActive={(match, location) => {
   if (!match) return false;  // only consider an event active if its event id is an odd number
   const eventID = parseInt(match.params.eventID);
     return !isNaN(eventID) && eventID % 2 === 1;
               }}>
     Event 123</NavLink>