[TIL] React Router(2)

React Router

페이지 이동

HTML에서 다른 페이지로 이동하려면 a 태그를 사용한다. 다만 a 태그는 CSR을 위한 용도로는 바로 사용할 수 없어서 리액트 라우터는 a 태그를 감싼 Link 컴포넌트를 제공한다.

 

Link 컴포넌트는 a 태그의 href 속성 대신 to 속성을 제공한다. to 속성에 이동시키고 싶은 경로를 문자열로 작성하면 요소를 클릭했을 때 해당 경로로 이동한다.

 

또 다른 페이지를 이동시키는 방법은 useNavigate 훅을 사용하는 것이다.

 

useNavigate 훅을 호출하면 navigate 함수를 얻을 수 있는데 인수로 이동하고 싶은 경로를 넣으면 된다.

 

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

function App() {
  const nav = useNavigate();

  const onClickButton = () => {
    nav("/new");
  };

  return (
    <>
      <div>
        <Link to={"/"}>Home</Link>
        <Link to={"/new"}>New</Link>
        <Link to={"/diary"}>Diary</Link>
      </div>
      <button onClick={onClickButton}>New 페이지 이동</button>
    </>
  );
}

export default App;

동적 경로

라우트 변수

라우트를 설정할 때 라우트 경로는 콜론(:)을 붙일 수 있는데 이처럼 콜론을 앞에 붙인 심볼을 라우트 변수라고 한다.

 

<Route path="/diary/:id" element={<Diary />} />

 

라우트 변수는 라우트 경로의 일정 부분이 수시로 바뀔 때 사용한다.

 

 

useParams

URL 파라미터로 전달한 값을 꺼내오려면 해당 컴포넌트에서 useParams 훅을 불러오면 된다.

 

useParams 훅은 현재 브라우저에 명시한 URL 파라미터의 값을 가져오는 기능을 한다.

 

useParams 훅을 호출하고 그 값을 변수에 담아서 사용하면 된다.

 

const params = useParams();

 

 

useSearchParams

쿼리 스트링으로 전달한 값을 꺼내오려면 해당 컴포넌트에서 useSearchParams 훅을 불러오면 된다.

 

useSearchParams 훅은 searchParams 객체와 setSearchParams 세터 함수를 반환한다.

 

searchParams에는 쿼리 스트링으로 전달한 변수와 값들이 들어오게 되고 setSearchParams에는 특정 쿼리 스트링의 값을 변경할 수 있는 함수가 들어오게 된다.

 

searchParams의 get 메서드를 사용하면 쿼리 스트링을 얻을 수 있다.

 

const [searchParams, setSearchParams] = useSearchParams();

const to = searchParams.get("value");