개요
클라이언트 사이드 렌더링을 하고 싶은데 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를 적용하는 방법을 설명하고 있다.
요약하면
- 먼저 MUI의 Link 컴포넌트로 평소처럼 스타일링해준다.
- react-router-dom의 Link를 중복 방지를 위해 RouterLink라고 이름붙여서 가져온다.
- Link에 component={RouterLink}를 전달해서 react-router-dom의 Link와 통합한다.
- 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>
}
'프로젝트 과정 기록' 카테고리의 다른 글
[JS] Chartjs 막대그래프 그리기 (별점 분포 차트) (0) | 2023.08.03 |
---|---|
[React] 회원가입 유효성 검사 구현하며 겪은 시행착오와 react-hook-form 사용 (0) | 2023.07.31 |
[React] 카카오 지도 API - 키워드로 장소 검색하고 목록으로 보여주기 구현 +) Typescript (0) | 2023.07.17 |
[CSS] Navbar 아랫부분의 그림자가 가려지지 않게 하는 법 +) 가상클래스, react-router-dom Outlet, MUI (0) | 2023.07.13 |
[MUI] material ui, emotion으로 global style 설정하기 (0) | 2023.07.12 |