ReactJS 라우터

이 장에서, 우리는 애플리케이션에 라우터를 설정하는 방법을 배웁니다.

번1단계-React 라우터 설치

간단한 설치 방법react-router는command prompt창에서 다음 코드 단락을 실행합니다.

C:\ Users \ 이름\ Desktop \ reactApp> npm install react-router

번2단계-컴포넌트 생성

이 단계에서, 우리는 네 개의 컴포넌트를 생성합니다. 이App이 컴포넌트는 탭 메뉴로 사용됩니다. 라우터 변경 후(Home), (About)，(Contact)다른 세 개의 컴포넌트를 렌더링합니다.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'
class App extends React.Component {
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　ul>
　　　　　　　　　　　　<li>홈</li>
　　　　　　　　　　　　<li>소개</li>
　　　　　　　　　　　　<li>연락처</li>
　　　　　　　　　　　　</ul>
　　　　　　　　　　　　{this.props.children}
　　　　　　　　　</div>
　　　　　　)
　　　}
}
export default App;
class Home extends React.Component {
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Home...</h1>
　　　　　　　　　</div>
　　　　　　)
　　　}
}
export　default　Home;
class　About　extends　React.Component　{
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>About...</h1>
　　　　　　　　　</div>
　　　　　　)
　　　}
}
export　default　About;
class　Contact　extends　React.Component　{
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Contact...</h1>
　　　　　　　　　</div>
　　　　　　)
　　　}
}
export　default　Contact;

번3단계-라우터 추가

이제, 애플리케이션에 라우팅을 추가하겠습니다. 이번에는 표시하지 않고App이전 예제와 같이 요소를 표시합니다Router。또한, 각 라우트에 컴포넌트를 설정하겠습니다.

main.js

ReactDOM.render((
　　　<Router　history　=　{browserHistory}>
　　　　　　<Route　path　=　"/"　component　=　{App}>
　　　　　　　　　<IndexRoute　component　=　{Home}>　/>
　　　　　　　　　<Route　path　=　"home"　component　=　{Home}>　/>
　　　　　　　　　<Route　path　=　"about"　component　=　{About}>　/>
　　　　　　　　　<Route　path　=　"contact"　component　=　{Contact}>　/>
　　　　　　</Route>
　　　</Router>
),　document.getElementById('app'))

애플리케이션이 시작될 때, 우리는 세 가지 클릭 가능한 링크를 볼 수 있으며, 이를 통해 라우팅을 변경할 수 있습니다.