문제상황
회사에서 사이드 프로젝트를 만드는 과정에서 ant 디자인을 사용하였다. ant 디자인중에 Menu 컴포넌트를 사용했는데, 그리고 Menu에 Link 컴포넌트를 삽입했는데, 버튼을 누르면 자꾸 닫히는 현상이 일어났다. Link 컴포넌트를 넣으면 발생하는거같았다.
처음 코드
export default function Test() {
const router = useLocation();
const category = router.pathname.split("/")[0];
return (
<>
<Menu
style={{ width: 240 }}
mode="inline"
>
<SubMenu key="sub1" title={<Link to="/main">Main</Link>}></SubMenu>
<SubMenu key="sub2" title={<Link to="/post">Post</Link>}>
<Menu.Item key="item1">
<Link to="/post/register">등록하기</Link>
</Menu.Item>
</SubMenu>
<SubMenu key="/etc" title={<Link to="/etc">Etc</Link>}>
<Menu.Item key="item2">
<Link to="/post/register">등록하기</Link>
</Menu.Item>
</SubMenu>
</Menu>
</>
);
}
해결된 코드
export default function Test() {
const router = useLocation();
const category = router.pathname.split("/")[0];
return (
<>
<Menu
style={{ width: 240 }}
defaultOpenKeys={[category]}
selectedKeys={[router.pathname]}
mode="inline"
>
<SubMenu key="/main" title={<Link to="/main">Main</Link>}></SubMenu>
<SubMenu key="/post" title={<Link to="/post">Post</Link>}>
<Menu.Item key="/post/register">등록하기</Menu.Item>
</SubMenu>
<SubMenu key="/etc" title={<Link to="/etc">Etc</Link>}>
<Menu.Item key="/etc/register">등록하기</Menu.Item>
</SubMenu>
</Menu>
</>
);
}
defaultOpenKeys
카테고리의 항목을 열리게 하려면 defaultOpenKeys 값에 SubMenu의 키값을 배열로 넣어야한다. 예를 들어 메뉴 버튼의 Post 카테고리에 등록하기 버튼을 누르고 항목을 Post 항목을 계속 열리게 할려면 SubMenu의 키값을 defaultOpenKeys에 계속 넣어주고 있어야한다. (만약 이것을 안넣어주면 다른 항목을 누를 때 마다 계속 닫히게 된다.)
selectedKeys
여기에 값을 넣어줘야 그리고 파란색 하이라이트 기능이 된다는 것을 알았다. 그래서 key값을 url로 만들고, rotuer.pathname을 사용하여 메뉴의 하위 항목을 누를 때마다 하이라이트 되도록 만들었다. (배열로 해야함)
'React' 카테고리의 다른 글
| [React] react-paginate with styledComponent (1) | 2024.10.12 |
|---|---|
| [React] Recoil SelectorFamily (0) | 2024.09.22 |
| [React] Tailwindcss, Styled Components 연동 (0) | 2022.09.29 |
| [React] react typescript can't resolve './app' 에러 (0) | 2022.09.28 |
| [React] tailwindcss 설치 (0) | 2022.09.28 |
