왜 isActive가 true가 되는지 모르겠습니다.

---

import React from 'react';

import { NavLink } from 'react-router-dom';

const Category = ({ category }) => {

return (

<NavLink

// to={category.url}

to={`products?category=${category.name}`}

className={({ isActive }) =>

isActive ? 'categoryActive' : 'categoryTitle'

}

>

<li>{category.title}</li>

</NavLink>

);

};

export default Category;

안녕하세요. NavLink를 사용해서 링크를 입력하고

선택 된 것에만 css를 적용하고 싶은데

경로가 문제인지 아래의 이미지처럼 모든 버튼에 active가 되어서 categoriActive className이 먹힙니다.

이유가 뭘까요??