[React] Router - useNavigate, useLoaction, useParams

useNavigate?

react-router-dom(V6)에서 useHistory를 대체한 새로운 기능

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

function Main() {
  const navigate = useNavigate();
  return <div onClick={() => navigate("/login")}>해당 주소로 이동!</div>;
}

navigage('/about', {replace: true});
navigate(-1); // 뒤로가기 
navigate(1); // 앞으로 가기

navigate 함수는 두번째 인자도 받을 수 있다! navigage('/about', {replace: true}); replace의 기본값은 false로 기본적으로 해당 주소로 이동한 뒤, 뒤로가기를 하면 이전 페이지로 되돌아간다.
하지만 true로 설정하면 이전 페이지가 아닌 메인 페이지('/')로 이동한다.

---

useLocation?

현재 페이지에 대한 정보를 알려주는 기능

• pathname: 쿼리 스트링을 제외한 경로를 반환
• search: pathname을 제외한 쿼리 스트링을 반환

import React from "react";
import { useLocation } from "react-router-dom";

function LoginPage(){
  const location = useLoaction();
  console.log(location);
  return (
    {...}
  )
}

http://localhost:3000/login?id=fe1

---

useParams?

동적 라우팅을 위한 URL parameter를 가져오고 싶을 때 사용하는 기능 (상세 페이지 만들 때 유용)

1. :작명 - url parameter 생성

import React from "react";
import { Routes, Route } from "react-router-dom";
function App(){
  return (    
	<Routes>
	  <Route path="/detail/:params" element={<DetailPage />} />
	</Routes>
  );
}

http://localhost:3000/detail/123 

params: 123

2. useParams 통해 url parameter를 가져온다.

import React from "react";
import { useParams } from "react-router-dom";

function DetailPage() {
  const { params } = useParams();
  console.log(params);
  // 해당 params 값(123)으로 서버에 알맞은 데이터를 요청해온다. (동적 라우팅)
  return <div>DetailPage</div>;
}

export default DetailPage;

---

[참조] https://intrepidgeeks.com/tutorial/20220315-til-usenavigate-uselocation-useparams