react-router-dom 모듈은 Router, Switch, Route 그리고 Link 등등과 같은 API를 사용할 수 있도록 제공하고있다.
이를 사용해서 SPA를 쉽게 구현할 수 있다.
Router: Route 사용하고자하는 컴포넌트들의 wrapper
Switch: url에 해당하는 컴포넌트 하나만 render하기 위한 것
Route: url에 따라 컴포넌트를 render하며, root url(/)이 있는 경우 exact과 함께 사용하면 좋음
(튜토리얼은 이 영상을 참고하며 따라했다.
https://www.youtube.com/watch?v=Law7wfdg_ls&t=1038s)
우선, url의 변경만으로 페이지 전환이 가능하게하려면 router, switch 그리고 route를 필요로한다.
아래와 같이 Router로 전체를 감싸면되고
Route는 path와 component라는 props를 가지며 원하는 경로를 입력하고 렌더링할 컴포넌트를 넣어준다.
또한 동적으로 렌더링하기 위해 query string을 사용할 수도 있다.
const App = () => (
<Router>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/solutions/:problemNo" component={MyApp} />
</Switch>
</Router>
);myApp이라는 경로를 접속하기위해서는 url를 직접 입력할 수도 있겠지만,
anchor같은 링크요소를 통해서도 접속이 가능할 것이다.
이를 지원해주는 것이 Link이다. to props를 가지며 number데이터를 포함한 경로를 입력해준다.
<Link to={`/solutions/${info.problemNo}`}>
<button>GO!</button>
</Link>자, 이제 컴포넌트에서 어떻게 파라미터를 받는지 궁금할 것이다. 🤔
라우팅된 컴포넌트는 본인에 props에 history, location 그리고 match라는 object를 추가적으로 가지게된다.
찾고자하는 params가 match object내부에 한 속성으로 자리잡고 있는 것을 볼 수 있다.
(혹시라도 이런 object들이 컴포넌트에 전달이 안됐다면, 본인이 렌더링하려는 컴포넌트에 props를 잘 전달됐는지 확인해보자. 내가 그런 실수를 했기 때문에,, 😅)
return (
<div>
<Nav />
<Body number={props.match.params.problemNo} />
</div>);
};접근 방법은 위 처럼 간단하고 정상적으로 Link를 통해 전달된 problemNo 파라미터가 컴포넌트에도 잘 전달이되어 렌더링 된 것을 확인할 수 있었다.
각 API들은 더 많은 props 속성들을 제공하고 있다. 이곳을 참조하길 바란다! 👉 https://knowbody.github.io/react-router-docs/api/
