[react/공부] url Linking (useNavigator, URLSearchParams)

페이지 링킹하기

 

---

       URL Search Params() 

`URLSearchParams()`는 기본 내장 함수로, 몇 가지 메소드를 사용하여 URL을 컨트롤할 수 있다.

 

 

사용법

 

.get(파라미터)

특정 파라미터 값을 가져온다.

new URLSearchParams("popup=open").get("popup") //open

//응용하기
const params = new URLSearchParams(window.location.search); //현재 와있는 주소, "....id=juha"
console.log(params.get("id")); // 'id' 파라미터의 값, "juha"를 가져옴

 

.set(파라미터, 값)

특정 파라미터 값을 설정한다.

const params = new URLSearchParams(window.location.search);

//"...?" 값이 없는 경우
params.set("id", "1234"); //"...?id=1234" url 추가

//"...?id=0000" 값이 있는 경우
params.set("id", "1234"); //"...?id=1234" 해당 값 변경

 

 

.append(파라미터, 값)

특정 파라미터를 추가한다.

//"...?id=1234"
params.append("id", "5678"); //"...?id=1234&id=5678" 뒤에 값을 추가함

** .set과 .append가 모두 파라미터를 추가할 수 있지만,

.set은 파라미터가 원래 있을 때 값을 대체한다면

.append는 있는지 여부와 관계없이 뒤에 값을 추가한다.

 

 

---

       useNavigate() 

useNavigate()는 페이지를 이동할 수 있도록 돕는 React Router Hook이다.

 

사용법

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

const MyComponent = () => {
  const navigate = useNavigate();

  return (
     navigate("/있는 주소") //해당 주소로 이동
     navigate("/없는 주소") //404 오류 페이지
     navigate("없는 주소") //url 값 변경
  );
};

 

 

---

URL과 네비게이션을 컨트롤하는 방법을 정리했는데,

겹치는 것도 많고 비슷해서, 계속 사용하면서 익숙해져야할 것 같다.