TIL 16 | 라우팅

없는블로그·2021년 6월 30일

라우팅

리액트에서도 브라우저 주소창대로 다른 페이지를 보여줄 수 있고, 이걸 라우팅이라고 부른다. 이미 만들어진 라우팅 라이브러리가 있기 때문에 패키지를 설치해서 사용.

yarn add react-router-dom 공식문서

리액트에서 라우팅 처리

BrowserRouter 적용하기!

index.js 에서 BrowserRouter를 임포트하고 적용한다
import { BrowserRouter } from "react-router-dom";
-
-
<BrowserRouter>
    <App />
</BrowserRouter>

Route 사용방법!

넘겨줄 props 가 없을 때

<Route path="주소[ex) /cat]" component={보여줄 컴포넌트} />

넘겨줄 props 가 있을 때

<Route path="/cat" render={(props) => (<BucketList list={this.state.list})} />

이 때!! 기본 값이 path="/" 이고, 사용되는 다른 경로가 path="/cat" 일 때, cat 컴포넌트에서는 기본 컴포넌트가 같이 나오게 된다.
<Route path="/" exact component={Home} />
<Route path="/cat" component={Cat} />
이렇게 exact 를 사용하면 중복처리를 할 수 있어 해당 문제를 해결할 수 있다.

URL 파라미터 사용하기

파라미터를 줄려면!
<Route path="/cat/:cat_name" component={Cat} />
그리고 해당 컴포넌트에서 파라미터를 받아 사용하기 위해서는 해당 파라미
터가 어디에 저장되어 들어오는지 알아야 한다.
// in `localhost:3000/cat/nabi`
//
console.log(props.match)
Cat 컴포넌트에서 props.match 를 콘솔로 찍어보면 params 안에 {cat_name: "nabi"} 로 저장된 파라미터를 찾을 수 있다.
// 'nabi' 를 사용하려면
props.match.params.cat_name

링크 이동 시키기!

<Link/> 컴포넌트를 사용해서도 페이지 전환을 할 수 있다.
사용법은
<Link to="주소">[텍스트]</Link>

또 조금 더 함수를 사용한 페이지 전환법으로는 history 객체를 사용하는 방법이 있다. 일단 history 객체를 사용하기 위해서는 withRouter 를 가져와야한다.
import { withRouter } from "react-router";
-
// 그리고
componentDidMount(){
  console.log(this.props);
}
// history 의 객체들을 확인할 수 있다
그 중에 push 와 goBack 을 통해 button에 페이지를 이동하거나 뒤로 돌아가는 것을 구현할 수 있다.
onClick={() => {this.props.history.push('/cat/nabi')}}
-
onClick={() => {this.props.history.goBack();}}

추가적으로

사용자 경험을 위해 없는 파라미터로 진입했을 때 페이지가 없다는 알림이나 워딩을 보여줄 필요가 있다. 즉, 없는 주소처리.
<Switch>
  <Route path="/" exact component={BucketList} />
  <Route path="/detail" component={Detail} />
  <Route component={NotFound} />
</Switch>
<Switch> 를 활용하게 되면 경로가 지정되지 않은 페이지는 모두 NotFound 로 들어가게 된다.