react-router-dom v6 사용법

📌 BrowserRouter

// index.js

<BrowserRouter>
	<App />
</BrowserRouter>

• 라우팅할 앱을 랩핑

---

📌 기본 구성

<Routes>
<Route path='/welcome' element={<Welcome />} />
<Routes />

• 경로가 /welcome일 때 Welcome 컴포넌트를 로딩
• <Route />의 순서는 중요하지 않음
• 가장 적합한 라우팅을 로드함
• exact가 v6부터 X. 정확히 일치하는 경로만 찾음.

---

📌 Redirect

<Route path="/" element={Navigate replace to="/welcome" />

• redirect를 위해서는 Navigate를 이용 (v6)

---

📌 중첩 라우팅

<Routes>
<Route path="new-user" element={<p>~</p>} />
</Routes>

<Link to="new-use">New User</Link>

• <Route>가 하나라도 <Routes>로 싸줘야 한다
• path를 입력할 때 /welcome/new-user로 적는 게 v5
• v6부터는 위와 같이 welcome을 반복하지 않고 적어줌

위와 같이 중첩 라우팅을 하는 경우

<Route path='/welcome/*' element={<Welcome />} />

• /*를 붙여줘야 welcome의 구성 요소(new-user)를 로드

---

📌 Outlet

// App.js
<Route path='/welcome/*' element={<Welcome />}>
	👋<Route path="new-user" element={<p>~</p>} />
</Route>

// Welcome.js
<Link to="new-use">New User</Link>
<Outlet/>

• App.js의 👋 뒤로 오는 코드의 element는 Welcome.js의 어느 부분에 위치해야 할까
• <Outlet/>으로 중첩 라우팅 콘텐츠의 위치를 지정할 수 있음

---

📌 동적 라우트

<Route path='product-detail/:productId' element={<ProductDetail />}>

• 경로에 콜론을 입력하는 것이 중요
• 동적 경로 세그먼트
• 이 페이지가 로드되어야 하는 전체 경로는 다음과 같다고 정의
• 경로의 productId는 placeholder 같은 것
• hi.com/product-detail/p1 마음대로 적어줄 수 있음

UseParams

const params = useParams();

return (
~
<p>{params.productId}</p>
// 이 부분은 경로에 적었던 것과 같이 적어줌
~
);

• 이렇게 작성하면 hi.com/product-detail/p1에 있는 경우 {params.productId}는 p1을 보여줌. 도메인마다 다르게 반응.

// 활용 예
<Link to={`/quotes/${props.id}`} element={<p>~<;/p>}>

---

📌 useNavigate (=useHistory v5)

const navigate = useNavigate();

• useEffect 훅에서 이용 / http 요청이 끝날 때~
  navigate('/welcome', {replace: true});
• 현재의 라우팅을 새로운 것으로 대체
  navigate(-1)
• 이전 페이지로 돌아감
• 마음대로 숫자를 넣어 경로 지정(-1, 2...)

---

📌 저장하지 않은 페이지를 실수로 나가는 경우

• v6에는 이런 기능이 X. 직접 구현.
• v5에만 존재