React-router: NavLink active class not work with query string

Created on 27 Jul 2017  路  1Comment  路  Source: ReactTraining/react-router

    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1"
{jsonData.map(tag => (
          <NavLink
            key={tag.tagId}
            to={`/tags/${tag.tagId}${search}`}
            isActive={(match, location) => location.pathname + location.search === `/tags/${tag.tagId}${search}`}
            className="tag-link"
          >
            {tag.tagName}
          </NavLink>
        ))}

Why query string doesn't taken into account, at default active class calculation? Is it default behaviour? I should provide the same isActive function every time I want to highlight it

>All comments

v4 doesn't process query strings at all. This is left up to you so you can choose the library that best matches the semantics you want. It also reduces tons of complexity and opinions in the library, making it more flexible for you to use. It's more work, but it's for the best for everyone.

But if you need to match the search string often, you can simply wrap NavLink in your own component to avoid the same boilerplate everywhere.

Was this page helpful?
0 / 5 - 0 ratings