React.js Routing props,Nested Routing,Redirect

props
- Route 컴포넌트는 3가지 props를 전달받는다
  - history : push, replace로 다른 경로로 이동, 앞뒤 페이지 전환이 가능하다
  - location : 현재 경로의 정보를 지님, URL 쿼리 정보도 가지고 있다
  - match : 아떤 라우트에 매칭되어 있는지와 params 정보를 가지고 있다
props를 이용한 경로 설정
- history의 push 메소드로 특정 위치로의 jump가 가능하다
```
this.props.history.push({ pathname: '/' + id });
this.props.history.push('/'+id); // 축약
```

Nested Routing (중첩 라우팅)

중첩 라우팅은 최상위 컴포넌트에서 라우팅되는 컴포넌트를 여러 단계에 걸쳐 쪼개는 것이다
애플리케이션의 규모가 커짐에 따라 최상위 컴포넌트에서만 라우트를 다루기에는 한계가 있다
여러 post들이 있고 이 중 한 개를 클릭했을 때 그 내용이 표시되어야한다면, 연관된 하위 컴포넌트에서 라우팅을 함으로서 좀 더 유연한 구현이 가능해진다

<Route path='/potsts' component={Posts} />
/*
* 다음과 같은 Route가 있을 때,
* match, location, history가 담긴 props를
* Posts 컴포넌트에 넘겨주게 된다
*/

/*
* Posts에서는 다시 하위 컴포넌트에 props를 
* 넘겨줄 수 있다
*/
<Route path={this.props.match.url + '/:id'} exact component={FullPost} />

/*
* 최하위 컴포넌트에서는 넘겨받은 params, props 등으로
* 작업을 수행할 수 있다
*/
if(this.props.match.params.id) {
    //...
}

Redirect
- Redirect는 from / to 를 이용하여 새로운 위치로 jump하게 해준다
- from의 요청 경로를 to로 redirection 한다
```
<Redirect from='/' to='posts' />
// root page의 경로를 posts page로 바꾼다
```
- 조건부 Redirection
- 조건을 추가하여 특정 조건이 만족되면 페이지 이동을 할 수 있다
- 로그인에 성공했을 때 나오는 페이지, 새로운 포스팅을 하고 home 화면으로 돌아가는 등 유용하게 쓰일 수 있다
```
let redirect = null;
if (this.state.submitted) { //특정 조건이 만족되면 home으로 귀환
    redirect = <Redirect to='/home' />;
}
return (
	{redirect}
)
```
- Redirect와 같은 기능을 하는 history의 replace() 메소드가 있다
- this.props.history.replace(‘home’); 사용법은 매우 간단
- push와 replace의 차이점은 history를 가지고 있는가의 차이다. 뒤로가기를 눌렀을때 replace는 특정 행위를 하기 이전으로 돌아가지만 push는 뒤로가기 버튼을 누르기 이전으로 돌아간다
- 즉, replace는 로그인 후 뒤로가기를 누르면 로그인 하기 전 머물렀던 페이지로 돌아가지만 push는 로그인 페이지 그 자체로 돌아간다.

참고 자료