Route를 내용을 작성해 보겠습니다👀
리액트 라우터로 SPA 개발
- 라우팅 : 다른 주소에 다른 화면을 보여주는 것
프로젝트에 라우터 적용
src/index.js파일에서react-router-dom에 내장된BrowserRouter컴포넌트 사용- 이 컴포넌트는 웹 애플리케이션에 HTML5의 History API를 사용히여 페이지를 새로고침하지 않고도 주소를 변경
- 현재 주소에 관련된 정보를
props로 쉽게 조회하거나 사용할 수 있도록 해줌
Route 컴포넌트로 특정 주소에 컴포넌트 연결
<Route path="주소 규칙" component={보여줄 컴포넌트} />규칙- ❗️주의,
"/"주소와"/about"주소에서"/"주소가"/about"주소 규칙에도 속하기 때문에 Home 컴포넌트가"/about"주소에도 나옴 - 해결 방법 ->
exact라는 props를true로 설정
Link 컴포넌트를 사용하여 다른 주소롤 이동하기
Link컴포넌트를 클리하면 다른 주소로 이동시켜 주는 컴포넌트- ❗️
a 태그를 사용하면 안됨
(저장된 상태들도 다 날라가고, 처음부터 이미 렌더링 됐던 컴포넌트도 다시 렌더링되기 때문) <Link to="주소">내용</Link>
Route 하나에 여러 개의 path 설정
<Route path={['/about', '/info']} component={About} />- 배열로 집어 넣음
URL 파라미터와 쿼리
- 페이지 주소를 정의할 떄 유동적인 값
- 예시
- 파라미터 :/profiles/ppby-> 특정 아이디 또는 이름을 사용하여 조회
- 쿼리 :/about?detail=true-> 어떤 키워드를 검색하거나 페이지에 필요한 옵션을 전달할 때
URL 파라미터
- 뒷 부분에 유동적인
username넣어주기 - 라우트로 사용되는 컴포넌트에서 받아오는
match라는 객체 안의params값을 참조
❖match객체 안에는 현재 컴포넌트가 어떤 경로 규칙에 의해 보이는지에 대한 정보가 들어 있음
URL 쿼리
location객체에 들어 있는search값에서 조회location객체는 라우트로 사용된 컴포넌트에게 props로 전달
(웹 애플리케이션의 현재 주소에 대한 정보를 지니고 있다)
❖location의 형태
{
"pathname" : "/about",
"search" : "?detail=true",
"hash" : " ",
}
// localhost:3000/about?detail=true 로 들어 갔을 때의 값Search값에서 특정 값을 읽어오기 위해서는 이 문자열(?detail=true")을 객체 형태로 변환
->qs라이브러리 사용- ❗️주의, 쿼리 문자열을 객체로 파싱하는 과정에서 결과 값은 언제나 문자열이다.
서브 라우트
- 라우트 내부에 또 라우트를 정의하는 것을 의미
리액트 라우터 부가 기능
history
hisroty객체는 라우트로 사용된 컴포넌트에match,location과 함께 전달되는 props 중 하나
- 이 객체를 통해 컴포넌트 내에 구현하는 메서드에서 라우터 API를 호출할 수 있다.
ex.
특정 버튼을 눌렀을 떄 뒤로 가기, 로그인 후 화면 전환, 다른 페이지로 이탈하는 것을 방지해야할 경우에 활용
withRouter
HoC, 라우트로 사용된 컴포넌트가 아니어도match,location,history객체를 접근할 수 있게 해줌
Switch
여러
Route를 감싸서 그 중 일치하는 단 하나의 라우트만을 렌더링 시켜 준다.
- 모든 규칙과 일치하지 않을 떄 보여 줄 Not Found 페이지도 구현
New Link
현재 경로와
Link에서 사용하는 경로가 일치하는 경우 특정 스타일 혹은 CSS 클래스를 적용할 수 있는 컴포넌트
(ง •̀_•́)ง