리액트 탭 메뉴 구현
-
[react] react-router-dom Outlet으로 Tab메뉴 구현하기프론트엔드 개발자가 될거야./react 2023. 2. 8. 13:45
이러한 메뉴를 Tab 메뉴라고 하는데 react-router-dom Outlet으로 구현하는 방법에 대해 포스팅하려고 한다. 예를들어 마이페이지를 탭메뉴로 구성한다면 1. Router.tsx function Router() { return ( ); } export default Router; 먼저 Router에서 MyPage 컴포넌트의 자식들로 메뉴들을 넣어준다. 2. MyPage.tsx function MyPage() { const profilesMatch = useMatch("/mypage/profile"); const logoutMatch = useMatch("/mypage/logout"); const settingMatch = useMatch("/mypage/googleOTP"); return (..