$$config title: [ React ] Router keywords: - Router $$ # React-Router : 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링해주는 라이브러리 # 종류 ## BrowerRouter > HTML 지원하는 브라우저의 주소 감지 ## HashRouter > 해시 주소를 감지 # 설치 #### npm ``` npm install react-router-dom ``` #### yarn ``` yarn add react-router-dom ``` # 사용 예시 #### [ Router ] ```java }> ``` #### [ Link ] ```java home ``` #### [ NavLink ] ```java home ``` ## Router ### 1. > path 속성 : 경로 > element 속성 : 컴포넌트 >> 여러 라우팅 매칭하고 싶을 때 URL 뒤에 *사용 [path="/product/*"] ### 2. > 여러 Route를 감싸 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할 ### 3. Link > a태그를 사용하지만, History API를 통해 브라우저 주소의 경로만 바꿀 수 있다. |문법|Import| |--|--| |링크명|import {Link} from 'react-router-dom';| ## Link와 NavLink의 공통점과 차이점 |공통점|차이점| |--|--| | 위의 Router에서 설정한 링크로 a태그의 기능을 가짐 | Link는 페이지 이동과 관련된 설정만 있는 반면, NavLink는 페이지 이동과 관련된 속성(스타일)을 가질 수 있다. | # URL 파라미터와 쿼리 스트링 사용 [유동적으로 동작 가능] ## 사용방법 [ useParams ] ```java import React from 'react'; import { useParams } from 'react-router-dom'; const Product = () => { const { productId } = useParams(); return ( <>

{productId}번 상품 페이지 입니다.

); } export default Product; ``` >const { 파라미터명 } = useParams(); or const 변수명 = useParams().파라미터명; 사용 [ Route ] ```java }> ``` > 경로에 ``` : ``` 사용해 설정 - URL 파라미터가 여러개인 경우 ```/product/:productId/:productName ```과 같이 사용할 수 있다.