useNavigate

useNavigate는 hook, 페이지 이동을 도와주는 함수

Link태그를 이용하면 a태그가 만들어져 디자인을 수정해야하는 번거로움이 있음

// navigate라는 변수에 useNavigate()를 할당해서 사용한다
let navigate = useNavigate();

기존 사용하던 Link, Route 방식(bootstrap)

<Nav.Link to="/" href="/">Home</Nav.Link>

useNavigate 사용하면

// 클릭했을때 페이지 이동
<Nav.Link onClick={() => {navigate("/");}}>Home</Nav.Link>

---

이상한 페이지로 접속했을때
404에러 페이지가 뜨도록 하는 방법

<Route path="*" element={<div>없는 페이지입니다</div>} />

'*' 은 내가 지정한 페이지들 이외의 모든 페이지를 의미한다

---

Nested Routes, Outlet

/about뒤에 /member 또는 /location등의 주소가 더 붙을 경우

기존방식

<Route path="/about/member" element={<div>어바웃안의페이지</div>} />

nested routes방법

<Route path="/about" element={<About />}>
	<Route path="member" element={<div>멤버페이지</div>} />
	<Route path="location" element={<div>위치페이지</div>} />
</Route>

장점

1. route 작성이 간단
2. nested routes 접속시에는 about페이지도 보여주고 member페이지도 보여준다
   즉, 2개다 보여준다
   단, 어디에 보여줄지를 작성해줘야한다
   그게 바로 Outlet이다. About.js 안에다가 Outlet을 작성해서 넣어야한다
   정확히 말하면, About.js 안에 멤버페이지를 보여주는 것

nested routes의 element 보여주는 곳은 Outlet

function About() {
	return (
		<div>
			<div>어바웃페이지입니다</div>
			<Outlet></Outlet>
		</div>
	);
}

nested routes는 언제 쓸까?

• 여러 유사한 페이지들을 필요할때 (안에 전체적으로 다 같은데 박스나 작은 요소가 변화해야할때)