react - 리액트 라우터

리액트 라우터

 

페이지 이동

* 기존 웹페이지는 여러개의 페이지를 사용

새로운 페이지를 로드하는 방식

<a href="sub.html">서브페이지</a>

 

* 리액트는 spa방식

새로운 페이지를 로드하지 않고 하나의 페이지안에서 필요한 데이터만 가져오는 형태를 가짐

 

* 라우팅

사용자가 요청한 url에 따라 해당 url에 맞는 페이지는 보여주는 것

 

* React-Router : 신규페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링해주는 라이브러리

 

설치하기

npm install react-router-dom

yarn add react-router-dom

 

<Link>

<NavLink> 링크 클릭 시 컴포넌트에 active클래스를 붙여줌

* 클릭한 링크의 스타일을 지정할 수 있음.

 

URL 파라미터

- 사용법 : 경로에 : 사용해서 설정한다.

ex) /product/:productId

<Route path="/product/:productId">

<NavLink to="/product/1">

 

useParams() => 파라미터 값을 가지고 있는 객체를 반환

 

쿼리스트링

product/1/신발?search=productname&q=demo#text

useLocation()

=> 쿼리스트링 값을 가지고 있는 객체를 반환

- hash : 주소의 #문자열 뒤의 값

- pathname : 현재 주소 경로 

- search : ? 포함한 쿼리스트링

- key : location객체의 고유 값, 초기값은 default, 페이지가 변경될 때마다 고유의 값이 생성된다.

#text => hash

product/1/신발 => pathname

?search=productname&q=demo => search