[React] react-router-dom

history 객체 참조

History는 브라우저의 세션 기록을 관리하는 객체로 해당 객체의 메서드인 goBack(), replace(), push()등을 사용하여 원하는 라우팅을 할 수 있다.

세션
사용자가 웹 브라우저를 통해 웹서버에 접속한 시점으로부터 웹 브라우저를 종료하여 연결을 끝내는 시점

<Route path="/sports" component={Sports} />

function Sports({history}) {
  console.log(history);
}

위의 방식을 이용하여 라우팅을 한다면, history 객체는 props로 전달되기 때문에 props.history로 참조 할 수 있다.

<Route path="/news">
  <News />
</Route>

import { useHistory } from 'react-router';

function News() {
  const history = useHistory();
  console.log(history);
}

하지만 위의 방식을 이용하여 라우팅을 한다면 useHistory hook을 사용하여 history 객체를 참조해야 한다.

그렇다면 라우트 컴포넌트가 아닌 컴포넌트에서도 history 객체에 접근이 가능할지 궁금했다.

import { withRouter } from 'react-router-dom';

const WithRouterSample = ({ location, match, history }) => {
  console.log(history);
};
export default withRouter(WithRouterSample);

withRouter HoC를 사용하면 마찬가지로 history 객체를 참조할 수 있다.

물론 위의 모든 방식은 history 뿐만 아니라 match, location 객체를 참조할 수 있다.

path parameter와 query String

페이지 url를 정의 할 때 동적으로 값을 전달해야 할 때도 존재한다. 이는 상황에 따라서 path parameter와 query string으로 나눌 수 있다.

path parameter: /detail/3
query string: /detail?price=150000

path parameter

일반적으로 path paramter는 id나 이름과 같이 특정된 자원을 보여줘야 할 경우에 사용된다.

위의 라우트과 같이 동적 라우팅 시 사용되는 특정한 값을 얻을 수 있는 방법이 존재한다.

이때는 match 객체를 이용하면 된다. 특정한 값을 얻기 위해서는 아래와 같은 방식을 통해
값을 얻을 수 있다. (match는 Route path와 URL의 매칭에 대한 정보를 가진 객체이다.)

Route path는 매칭에 사용된 경로의 패턴(ex. /detail/:id)을 말하며 URL의 매칭에 대한 정보는 실제로 매칭된 URL 문자열(ex. /detail/1)을 말한다.

function SingleProject({match}) {
  const { id } = match.params
}

// or
import { useHistory, useParams } from 'react-router-dom'
//...
const { id } = useParams()

query string

query string은 정렬되거나 필터링되어 정제된 자원을 보여줘야 할 경우에 사용된다.

위의 라우트과 같이 query string값을 얻을 때는 location 객체를 이용하면 된다.
(location는 현재 경로에 대한 정보를 가진 객체로 대표적으로 location.search를 이용하여 query string 값을 가져올 수 있다.)

하지만 url은 말그대로 string형태의 데이터이기 때문에 이를 객체로 변환해줘야 한다.
이를 위해서 Web API인 URLSearchParams를 이용하면 된다.

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

function useQuery() {
  return new URLSearchParams(useLocation().search);
}

function QueryParamsDemo() {
  const query = useQuery();
  console.log(query.get("price"), query.get("name"));
}

// or 

function QueryParamsDemo({location}) {
  const query = new URLSearchParams(location.search);
  console.log(query.get("price"), query.get("name"));
}

---

Reference

• https://reactrouter.com/web/guides/quick-start