예제를 위하여 05-active-links 디렉토리로 이동하고 npm install 을 실행해 놓자.
npm start를 해 보면 전 시간에 했던 예제의 완성본이 실행되고 있는 것을 확인 할 수 있을 것이다.
이번 예저는 링크를 클릭 할 경우 방문 페이지의 링크 색이 변하는 것을 확인 하는 것이다.
이제 코드를 수정을 해 보자.
[binrang@binrang modules]$ pwd
/home/binrang/react/react-router-tutorial/lessons/05-active-links/modules
[binrang@binrang modules]$ vi App.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
<li><Link to="/about">About</Link></li>
<li><Link to="/repos">Repos</Link></li>
</ul>
{this.props.children}
</div>
)
|
이 코드를 다음과 같이 수정한다.
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
<li><Link to="/about" activeStyle={{ color: 'red' }}>About</Link></li>
<li><Link to="/repos" activeStyle={{ color: 'red' }}>Repos</Link></li>
</ul>
{this.props.children}
</div>
)
}
})
|
npm start를 하고 브라우저를 보면 아래 그림과 같이 클릭한 링크가 붉은 색으로 표시되는 것을 확인할 수 있다.
 |
| 홈 화면 |
 |
| About를 클릭했을 때 붉은 색으로 표시 |
 |
| Repos를 클릭했을 때 붉은 색으로 표시 |
이제 또 코드를 수정해 보자.
[binrang@binrang modules]$ pwd
/home/binrang/react/react-router-tutorial/lessons/05-active-links/modules
[binrang@binrang modules]$ vi App.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
<li><Link to="/about" activeClassName="active">About</Link></li>
<li><Link to="/repos" activeClassName="active">Repos</Link></li>
</ul>
{this.props.children}
</div>
)
}
})
|
activeStyle 을 activeClassName으로 바꾸고 active라는 CSS를 정의하는 방식이다.
상위 디렉토리의 index.html 코드를 수정하자.
[binrang@binrang 05-active-links]$ pwd
/home/binrang/react/react-router-tutorial/lessons/05-active-links
[binrang@binrang 05-active-links]$ vi index.html
<!doctype html public "storage">
<html>
<meta charset=utf-8/>
<title>My First React Router App</title>
<div id=app></div>
<script src="bundle.js"></script>
|
이 파일에 아래와 같이 추가하자.
<!doctype html public "storage">
<html>
<meta charset=utf-8/>
<title>My First React Router App</title>
<link rel="stylesheet" href="index.css" />
<div id=app></div>
<script src="bundle.js"></script>
|
그 다음은 index.css 파일을 만들고 css 코드를 추가하자.
[binrang@binrang 05-active-links]$ pwd
/home/binrang/react/react-router-tutorial/lessons/05-active-links
[binrang@binrang 05-active-links]$ vi index.css
.active {
color: green;
}
|
webpack 이 자동으로 실행된 것을 확인 할 수 있을 것이다.(npm start를 죽였다면 다시 실행해 보자.)
그리고 브라우저를 확인해보면 링크가 녹색으로 변한 것을 확인 할 수 있다.
 |
| About를 방문하면 링크가 녹색으로 변한다. |
 |
| Repos를 방문하면 링크가 녹색으로 변한다. |
이번에는 모듈 밑에 파일을 아래와 같이 추가 해 보자
[binrang@binrang modules]$ pwd
/home/binrang/react/react-router-tutorial/lessons/05-active-links/modules
[binrang@binrang modules]$ vi NavLink.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
render() {
return <Link {...this.props} activeClassName="active"/>
}
})
|
App.js 파일을 아래와 같이 수정한다.
[binrang@binrang modules]$ vi App.js
import React from 'react'
//import { Link } from 'react-router'
import NavLink from './NavLink'
export default React.createClass({
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/repos">Repos</NavLink></li>
</ul>
{this.props.children}
</div>
)
}
})
|
즉 NavLink.js에 react-router를 import하고 App.js 에서는 NavLink를 import 했다.
이제 브라우저에서 확인해보면 같은 결과를 얻은 것을 확인 할 수 있다.
 |
| About를 방문하면 녹색으로 변한다. |
 |
| Repos를 방문하면 녹색으로 변한다. |
이제 active link에 대해서 확인 했다.
참고 URL : 05-active-links
댓글 없음:
댓글 쓰기