[React] 라우터 - navigate, outlet(nested routes)

 

 

*️⃣ 페이지 이동 도와주는 useNavigate()

1. useNavigate 변수에 따로 저장

 

2.  onClick에  navigate('/라우터에서 만든 경로') 넣어줌

 

 

*️⃣ navigate로 뒤로가기 버튼 만들기

navigate(-1) (*-2 넣으면 두 페이지 뒤로감)

 

 

 

*️⃣ 404 페이지 설정(이상한 페이지로 접속했을 때)

<Route>의 path에 "*", element에 출력할 코드 입력

 

 

*️⃣ Nested Routes란 Route 태그 안에  Route 태그 있는 것

nested routes는 여러 유사한 페이지 만들때 사용多

 

 

 

✨ Nested Routes 장점

1. route 작성이 약간 간단해짐

2. nested routes 접속시엔 element 2개 보여줄수있음

 

 

/about/member로 접속했을때

about, member 각각의 element들이 보임 (element 2개)

 

 

<About /> 컴포넌트 안에 member의 element가 들어갈 자리를 <Outlet>으로 만들어 놔야함

<Outlet>란 nested routes의 element를 보여줄 자리

 

element 두개가 같이 출력 됨