[React] navigate, nested route, outlet

navigate

• 페이지 이동 기능 구현을 위해 사용
• Link 태그를 대신해 사용 가능

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

function App(){
	let navigate = useNavigate()

	<button onClick={() => { navigate('/detail') }}>이동버튼</button>
}

1. useNavigate 임포트
2. useNavigate() 이용해 선언
3. navigate( ‘경로’ ) 와 같이 사용
   • navigate(-1) : 뒤로 가기

---

 <Route path =”*” element={ Component } />

• 위와 같이 라우터 경로를 지정하면, 따로 지정이 안된 모든 경로에 대해 위 라우터에 지정된 컴포넌트를 출력 → 404 에러 페이지 등에 사용

---

nested routes, outlet

• 경로 내 경로의 요청에 대해 컴포넌트를 출력하기 위해 사용
  • /about/company, /about/employee 등
• 반드시 Outlet을 같이 사용해줘야 화면에 출력시킬 수 있음

<Route path="/about" element ={ <About/> } >
	<Route path="company" element ={ <회사소개 /> } />
	<Route path="employee" element ={ <직원소개 /> } />
</Route>

• /about 경로 요청에 대해서 About 컴포넌트 출력
• /about/company 경로 요청에 대해서 회사소개 컴포넌트 출력
• /about/employee 경로 요청에 대해서 직원소개 컴포넌트 출력

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

function About(){
	return (
		<div>
			<h4>about 페이지</h4>
			<Outlet/> // About 컴포넌트 내 Outlet을 지정해주면, nested routes들이 해당 위치에서 출력
		</div>
	)
}

• nested routes의 사용을 위해 해당 컴포넌트 내에 Outlet을 지정해주어야 한다.