[MUI] material-ui <Link> 컴포넌트에 React-router-dom의 Link 적용하는 법

개요

클라이언트 사이드 렌더링을 하고 싶은데 MUI에서 제공하는 Link 컴포넌트는 일반 href을 사용해서 화면이 깜박이고 이동이 느리다.

<Link href="/register" variant="body2" underline="hover" color="text.secondary">
  회원가입 하기
</Link>

그렇다고 react-router-dom의 Link를 사용하자니 MUI의 Link로 간편하게 스타일링한다는 장점을 잃어버리고 만다.

 

어떻게 하면 좋을까? 답은 바로 react-router-dom 상속하기이다.

 

react-router-dom의 Link 적용하기

material ui의 Routing libraries 문서를 보면 Link 컴포넌트에 third-party 라이브러리의 Link를 적용하는 방법을 설명하고 있다.

 

요약하면

1. 먼저 MUI의 Link 컴포넌트로 평소처럼 스타일링해준다.
2. react-router-dom의 Link를 중복 방지를 위해 RouterLink라고 이름붙여서 가져온다.
3. Link에 component={RouterLink}를 전달해서 react-router-dom의 Link와 통합한다.
4. href 대신 react-router-dom의 to로 바꿔준다.

import { Link } from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';

function MyLink() {
    <Link
      component={RouterLink}
      to="/register"
      variant="body2"
      underline="hover"
      color="text.secondary"
    >
      회원가입 하기
    </Link>
}