[React] 리액트 Router(라우터) 사용하기

Router(라우터) : 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리

- spa에서 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 컴포넌트만 가져와 다른가져와 다른 페이지를 나타내는 방식을 지원
- 라우팅 : 사용자가 요청한 url에 따라 해당 url에 맞게 페이지를 보여주는 것
- 이전 mpa : 새로운 페이지를 로드하며 페이지를 이동하는 방식  ex) <a href="sub.html">서브페이지</a>

 

 

1. 라우터 설치하기 : 새 터미널 열어 npm install react-router-dom 을 복사해 붙여넣는다.

 

2. 라우터 사용하기

1) 상위 컴포넌트에 라우터를 적용 : <BrouwserRouter> 컴포넌트

index.js 파일 

<BrouwserRouter>
	<App></App>
</BrouwserRouter>

 

2) 경로에 따라 보여질 component를 설정 : <Routes>, <Route> 컴포넌트

<Routes>
    <Route path="경로" element={<경로에 따라 나타날 component명/>}/>
    <Route path="경로" element={<경로에 따라 나타날 component명/>}/>
</Routes>

 

3) <Link> 컴포넌트로 지정한 경로로 이동할 수 있게 구현

<Link to='Route로 지정한 경로'><p>홈으로</p><Link>

☞ Link 컴포넌트는 html의 a태그와 같은 기능을 한다 !

 

---

 

URL파라미터와 쿼리 스트링 : 페이지 주소를 정의할 때 가끔은 유동적인 값을 사용해야 할 때도 있다.

 

1. URL파라미터 : 경로가 /product/item1 일 때, useParams() 사용하기

useParams()는 객체를 반환, 반환된 객체의 형태 => { productname: item1 }

 

2. 쿼리 스트링 : 경로가 /product?item=1&keyword=react 일 때, useLocation() 사용하기

useLocation()은 객체를 반환, 반환된 객체의 형태 => { item: '1', keyword: 'react' }

 

---

 

useNavigate() : Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야 할 때 사용함

 

기본 구문 >

const navigate = useNavigate();

1) navigate(-1) : 이전 페이지로 이동

2) navigate(1) : 다음 페이지로 이동

 

3) navigate('경로') : 해당경로로 이동

 

---

 

<NavLink> 컴포넌트 : 링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우, 특정 스타일 또는 CSS클래스를 적용하는 컴포넌트

 

<NavLink> 컴포넌트에서 style 또는 className을 설정할 때 {isActive: boolean}을 파라미터로 전달받는 함수 타입의 값을 전달함.

 

예제 > 

const activeStyle = {
    backgroundColor: 'pink',
    fontSize: 24px
}

<NavLink style={ ({isActive}) => isActive ? activeStyle : undefined} />
<NavLink className={ ({isActive}) => isActive ? 'active' : undefined} />

 

---

 

NotFound 페이지 만들기 : 미리 정의되지 않은 경로에 사용자가 진입 했을 때 보여지는 페이지.

 

// * => 위에 설정된 경로를 제외한 모든 경로라는 뜻
<Route path='*' element={<NotFound/>} />