Material UI Drawer ListItem 을 라우터에 연결하고 아이콘 동적 로드하는 방법

머티리얼 UI 의 Persistent Drawer 코드로부터 메뉴를 만들다가 부딪힌 문제 해결법 정리.

버그라기 보다는 리액트를 몰라서 생기는 문제들.

먼저 Drawer - List 이하에 NavItem 이라는 컴포넌트를 새로 만들었는데 :

구현은 다음과 같다:

이 코드가 해결하는 문제는 다음과 같다:

1. 리액트 라우터 연결 : NavLink 을 루트 노드로 정의(ListItem.component)하고, to / exact 속성 추가

2. 선택된 아이템의 링크를 하이라이트한다.

3. 아이콘을 동적으로 읽어온다. 리액트 문서 내 conditional rendering 섹션을 참고했다.

삽질 로그