[Next.js] Mui BottomNavigation에 링크 넣기

mui의 BottomNavigation을 사용하는 과정에서 Link 삽입에 난항을 겪었다.

 

1️⃣ Link 태그로 감싸기?

• Next에 있는 next/link를 사용해서 Link 태그로 BottomNavigationAction을 감싸주었다.
• BottomNavigationAction에 설정한 label 등이 나타나지 않았다.
• 반대로 BottomNavigationAction으로 Link 태그를 감싸니 제대로 작동하지 않았다.

2️⃣ href 설정?

• 단순하게 가볼까 싶어 BottomNavigationAction에 href 설정을 줘봤으나 역시 생각한 방향대로 되지 않았다.

3️⃣ next/router 사용

참고글 : https://github.com/mui/material-ui/issues/22001

• 단비같은 글을 찾아 next/router을 사용하는 방법을 찾았고, 내가 원하던 것(라벨이 보일 것, 누르면 페이지 이동이 될 것)과 딱 들어 맞았다!

  const router = useRouter();

  const onLink = (href) => {
    router.push(href);
  };
  
  <BottomNavigationAction label="메인" icon={<HomeRoundedIcon />} onClick={() => onLink("/")} />