CODEWITHSUNDEEP
reactjsreact-router
Sh031224
Sh031224

Reputation: 809

NavLink always get active class on query

I want to add for activeClassName in NavLink.

<NavLink exact to="/" activeClassName="main-category-item-active"> .... </NavLink>
<NavLink to="/?tab=1" activeClassName="main-category-item-active"> .... </NavLink>
<NavLink to="/?tab=2" activeClassName="main-category-item-active"> .... </NavLink>

But the result looks like this picture.

enter image description here

I think it's because the path is a query.
How Can I do?

Upvotes: 0

Views: 1018

Answers (1)

gdh
gdh

Reputation: 13682

There is no support for processing query strings React router v4 and up.

Alternatively, you can use a simple wrapper component and use isActive to determine the activeness-logic.

// simple wrapper component for NavLink
const PathNavLink = (props) => (
  <NavLink isActive={(_, { pathname }) => pathname == props.to} {...props} />
);

// usage
<PathNavLink exact to="/" activeClassName="main-category-item-active"> .... </PathNavLink>

Upvotes: 1

Related Questions