React Router Quick Start Guide

isActive prop

The isActive prop is used to determine whether the <NavLink> component should have the active class applied (or inline styles specified in activeStyle prop). The function specified as a value to the isActive prop should return a Boolean value:

<NavLink    to={{        pathname: '/user',        search: '?id=1',        hash: '#hash',        state: { isAdmin: true }    }}    activeStyle={{        background: 'red',        color: 'white'    }}    isActive={(match, location) => {        if (!match) {            return false;        }        const searchParams = new URLSearchParams(location.search);        return match.isExact && searchParams.has('id');    }}>    User</NavLink>

From the preceding example, the function accepts two parameters—match and location. The styles defined in the activeStyle prop are applied only when the condition ...