404Page & useNavigate & nested Routes(Outlet)

❗️ 코딩애플 React '리액트 라우터2 : navigate, nested routes, outlet'강의를 수강하고 작성하였습니다.

라우터 장점
1. UI 만들면 뒤로가기 버튼 이용가능
2. 페이지 이동이 쉬움(UI 스위치 조작 쉬움)

404페이지 만드는 방법

*는 지정하지 않은 경로의 모든 경로들을 표현한다.

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

useNavigate

페이지 이동을 도와주는 함수이다.

사용법

app.js

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

function App(){
	let navigate = useNavigate(); //함수를
	return(
        <button onClick = {()=>{navigate(-1)}}></button>
        <button onClick = {()=>{navigate(1)}}></button>
    	<button onClick = {()=>{navigate('/detail')}}></button>
    )
}

• 첫번째 버튼은 뒤로 이동한다. → '-1' 뒤로 이동
• 두번째 버튼은 앞으로 이동한다. → '1' 앞으로 이동
• 세번째 버튼은 detail페이지로 이동한다.

nested Routes

여러 유사한 페이지가 필요할 때 사용한다.
ex) '안에 있는 박스 하나에 있는 텍스트 한개만 변경되어야 한다.'이럴 때 사용하면 좋다.

ex) About Page안에 URL member와 location인 subRouting을 구현하라

❗️nested Routes를 사용하지 않을 경우

<Route path="about" element={<About />} />
<Route path="/about/member" element={<div>멤버임</div>} />
<Route path="/about/location" element={<div>위치정보임</div>} />

✨nested Routes를 사용할 경우

<Route path="about" element={<About />}>
	<Route path="member" element={<div>멤버임</div>} />
  	<Route path="location" element={<div>위치정보임</div>} />
</Route>

이렇게만 작성하면 member,location URL에 접속하여도 About 컴포넌트 한개만 나온다.
→ 내부 어디에 보여줄지 정해줘야 된다

해결방법)
Outlet을 이용(어떤 자리에 보여줄지 정한다.)

About.jsx

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

const About = ()=>{
	return(
      <div>
        <h4>회사 정보임</h4>
        <Outlet></Outlet>
	  </div>
    )
}

<Outlet></Outlet>은 nested routes의 element를 보여주는 곳이다.

nested routes 장점

• nested route 접속시엔 element(About(회사정보임),Location(위치정보임))가 2개나 보인다.