[React] useNavigate / Navigate / Nested Routes

✅ useNavigate

• Link태그와 유사하게 페이지 이동을 도와줌
• 다만 Link태그는 하나의 버튼같은 느낌이라면, useNavigate는 하나의 코드로 범용성이 높은 느낌

// import
import {useNavigate} from 'react-router-dom';

// 선언
let navigate = useNavigate();

// 사용
<h4 onClick={()=>{navigate('/')}}> 메인화면 </h4>

• useNavigate를 사용할 때 괄호 안에는 경로를 써주게 되는데,
• -1을 입력하면 한 페이지 뒤로가기, 1 입력하면 한 페이지 앞으로가기 같은 기능도 있음!!

🔸 replace 옵션

• navigate의 replace 옵션 사용하면 페이지를 이동할 때 현재 페이지를 기록에 남기지 않음

const goAbout = () => {
	navigate('/about', {replace : true});
}

+) ☑️ 404 not found 페이지를 지정하고 싶다면?

• 페이지 접속을 잘못된 경로로 하면 404 페이지가 뜨는데,
• 해당 페이지를 어떻게 보낼지 지정할 수 있음
• route의 path 속성에 '*'를 넣어주면 됨
• '*' 는 wildcard 문자로, 아무 텍스트나 매칭한다는 뜻
• 즉, 라우트들의 규칙을 모두 확인하고, 일치하는 라우트가 없으면 나타나게 됨

✅ Navigate

• 컴포넌트를 화면에 보여주는 순간 다른 페이지로 이동하고 싶을 때 사용
• 즉, 페이지 리다이렉트를 하고 싶을 때 사용
• 예로 로그인이 되지 않은 상태에서 마이페이지 접근시 로그인 페이지로 강제 이동

import {Navigate} from 'react-router-dom'

const Mypage = () => {
	const isLoggedIn = false;
    
    if(!isLoggedIn) {
    	return <Navigate to="/login" replace = {true}>
    }
}

✅ Nested Routes

• 하나의 큰 카테고리 안에서 다양한 페이지로 세분화될 때, 보통 지정된 경로 뒤에 상세 경로만 돌아가며 쓰게됨
  => ex) '/family' 페이지 하위로 '/family/mom', '/family/dad'
• 이를 Route로 지정해줄 때, 각자 하나씩 경로를 모두 입력하는 방법도 가능하지만, 좀 더 쉬운 방법이 있음
  => Nested Routes
• 큰 카테고리가 되는 경로의 Route 태그 사이에 세부 Route 태그들을 입력, 경로는 '/'없이 이름만 넣어주기!!

// 각자 지정해준다면
<Route path = "/parent" elment={}></Route>
<Route path = "/parent/mom" elment={}></Route>
<Route path = "/parent/dad" elment={}></Route>

// Nested Routes
<Route path = "/parent" elment={}>
	<Route path = "mom" elment={}></Route>
	<Route path = "dad" elment={}></Route>
</Route>

• 아주 조금이지만 코드가 간소화되고 큰 카테고리 내에 속한 루트들을 보여주어 좀더 직관적인 효과가 있음
• 또한 이 방법으로는 parent element와 세부 element를 동시에 보여줄 수 있는데,
• 계속 바뀌는 세부 element는 parent element 내부에서 < Outlet>태그로 자리를 뚫어 놓으면 그 안으로 들어온다!!

// /parent 경로의 element에서
function Parent(){
	return(
		<div>
			<h4>This is my~</h4>
			<Outlet></Outlet>  // 여기로 mom과 dad 경로의 element가 들어옴!!
        </div>