React Router

슈퍼콜라·2022년 4월 10일

Route란 컴포넌트로 특정 주소에 컴포넌트를 연결하는것

1.1 기본

설치
npm i react-router-dom

사용법
<Router path="주소" component={컴포넌트이름}/>

예시1
<div>
	<Router path="/" component={home}/>
	<Router path="/abc" component={Abc}/>
</div>

예시1에서 /abc를 들어가면 두 컴포넌트가 다 나오는데, /abc 경로가 /에도 일치하기 때문
이를 수정 하려면 home을 위한 컴포넌트를 사용할 때 exact라는 props를 true로 설정 해야함

1.2 Link

Link는 클릭하면 다른 주소로 이동시켜 주는 컴포넌트

<Link to="/">홈</Link>
<Link to="/abc">ABC</Link>

<div>
	<Router path="/" component={home}/>
	<Router path="/abc" component={Abc}/>
</div>

1.3 URL 파라미터와 쿼리

페이지 주소를 정의할 때 값을 전달해야 할 때가 있음
일반적으로 파라미터는 특정 아아디와 이름을 사용하여 조회할 때 사용하고
쿼리는 키워드를 검색하거나 페이지에 옵션을 전달할 때 사용

파라미터 : /profiles/hong
쿼리 : /about?dog=true

1.3.1 URL 파라미터

<Link to="/">홈</Link>
<Link to="/profile/gildong">gildong의 프로필</Link>

<div>
	<Router path="/" component={home}/>
	<Router path="/profile/:username" component={Profile}/>
</div>

// Profile 컴포넌트
const data = {
	gildong:{
    	name:'길동'
    }
}

const profile = data[username];

const Profile = ({match}) =>{
	const { username } = match.params
}

URL 파라미터를 사용할 때 match라는 객체안의 params 값을 참조함
match 안에는 현재 컴포넌트가 어떤 경로 규칙에 의해 보이는지를 알 수 있음

1.3.2 URL 쿼리

쿼리는 location 객체에 들어 있는 search 값에서 조회 가능
location 객체는 라우트로 사용된 컴포넌트에게 props로 전달되며 웹 현재 주소에 대한 정보가 있음

http://localhost:3000/about?dog=true 일때 location 객체 예시

{
  "pathname" : "/about",
  "search" : "?dog=true",
  "hash" : ""
}

search 값을 읽어오기 위해 문자열을 객체 형태로 변환 해야함
쿼리 문자열을 객체로 변환할 때는 qs 라이브러리 사용

npm i qs

const query = qs.parse(location.search,{
	ignoreQueryPrefix: true // 맨 앞의 ?를 생략
});

쿼리 문자열을 객체로 파싱하는 과정에서 결과는 언제나 문자열이라
숫자는 parseInt로 변환하고 논리 자료형은 "true"나 "false" 문자열과 일치하는지 비교 해야함

1.4 라우터 부가 기능

1.4.1 서브 라우트

서브 라우트는 라우트 내부에 또 라우트를 정의하는 것을 의미
라우트로 사용되고 있는 컴포넌트 내부에 Route 컴포넌트를 또 사용하면 됨

1.4.2 withRouter

withRouter 함수는 라우트로 사용된 컴포넌트가 아니어도 match, location, history 객체를 접근할 수 있게함

1.4.3 Switch

Switch 컴포넌트는 여러 Route를 감싸서 그중 일치하는 하나의 라우트만 렌더링함
Not Found 페이지 구현할 때 용이

<Swich>
  <Router path="/" component={Home}/>
  <Router path="/about" component={About}/>
  
  <Route
  	// path를 따로 정하지 않으면 모든 상황에 렌더링 됨
  	render={({location})=>(
      <div>
        <h2>존재하지 않는 페이지 입니다.</h2>
      </div>
    )}
   />
</Swich>