[React] 리액트 라우터(react-router-dom) 중첩 라우팅으로 하위페이지 연결하기 - nested routing, outlet
협업 프로젝트를 진행하면서 다른 개발자 분이 새로운 환경으로 마이그레이션 해주시면서, 리팩토링을 도와주셨다. 그 중 페이지 설계의 중요한 부분인 중첩 라우팅과 관련하여 포스팅 해보려고 한다. 중첩 라우팅이 필요했던 페이지는 LoginPage와 SignupPage였다. 둘 다 비슷한 디자인 content-box 안에서 form 부분만 변경 되고, 각각 로그인 또는 회원가입을 클릭했을 시 해당 Link로 이동하는데, 이 비슷한 content-box를 컴포넌트화 하여 재사용하고 싶었고 이 컴포넌트 안에서 Login, SIgnup의 form 부분만 변경하고 싶었으나 컴포넌트 내에서 이 두 페이지를 연결하는 방법을 몰랐다. 처음에는 중첩 라우팅에 대해서 몰랐기 때문에 같은 디자인까지 포함하여 일일히 LoginPa..
JavaScript/React
2022. 11. 24. 01:43
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- import
- 항해 프로젝트
- 리액트
- 호이스팅
- 서버
- 항해99
- 타입스크립트
- URL
- 깃사용법
- 자바스크립트
- 미니 프로젝트
- require와 import 차이
- 깃헙
- Til
- 깃 협업
- Python
- flask 서버
- 항해
- MongoDB
- useState와 useRef 차이
- 리액트 페이지네이션
- git
- Flask
- 깃
- http란 무엇인가
- 중첩 라우팅
- 리액트 라우터
- 깃허브
- github
- 드림코딩
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
글 보관함