react-router-dom

페이지 이동 구현 패키지

페이지 설치 코드 : yarn add react-router-dom

 

• Router : 경로를 알려주는 장치

App.jsx 에서 어디로 가야하는지 알려주는 것

(리액트 라우터 돔 설정은 보통 main.jsx 나 App.jsx 에서 많이 해준다.)

 

 

■  기본 브라우저 라우팅

// 어디로 오면 어디로 보낼지!!!
// 1. 어디로 오면 : path
// 2. 어디로 보낼지 : element
<BrowserRouter>
<Routes>
<Route path=“/” element={<Home />} />  // 아무것도 없는 경로"/"도 필요하다.
<Route path=“/detail” element={<Detail />} />
</Routes>
</BrowserRouter>

 

 

■  동적 라우팅 (Dynamic Route)

path에 유동적인 값을 넣어서 특정페이지로 이동하게 구현하는 방법

path parameter를 컴포넌트에 전달할 수 있다. ("detail/:id")

주로 동일한 포맷에 다른내용, 보통 레이아웃 UI는 같은데 내용만 다를 경우 사용(상세페이지, 게시글 등)

// path parameter
<Route path=“/detail/:itemId” element={<Detail />} />

* Dynamic Route 사용 시 element 에 설정된 같은 컴포넌트를 렌더링한다.

 

■ react router dom 의 주요 Hook

 

☀︎ useParams

path parameter 를 감지

const params = useParams();
const name = params.name;

 

 

☀︎ useSearchParams

query parameter 를 감지

* query parameter :  ? Key = value

const [params, setParams] = useSearchParams(); // usestate 와 비슷한 형태
const age = params.get(“age”);

 

* query parameter 는 꼭 get 을 해줘야 값을 가져올 수 있다.

왜? query parameter 가 하나가 아닌 경우가 매우 많으므로 특정한 값을 가져오기 위해!

 

* setParams : params 를 변경한다.

  ☞  setParams(name=홍길동&age=40)

       * age 만 변경할경우 앞의 name 도 써줘야 함!!

 

 

☀︎ useLocation

현재 페이지의 정보를 조회

const location = useLocation();
console.log(location)

 

 

☀︎ useNavigate

페이지를 이동

const navigate = useNavigate();

return <button onClick = {() => {navigate("/detail")}}></button>