이번에는 네비게이션에 Home으로 가는 것을 구현하는 예제이다.
1. App.js 파일에 Home에 대한 Link 를 추가합니다.
[binrang@binrang modules]$ pwd
/home/binrang/react/react-router-tutorial/lessons/09-index-links/modules
[binrang@binrang modules]$ vi App.js
import React from 'react'
import NavLink from './NavLink'
export default React.createClass({
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
<li><NavLink to="/">Home</NavLink></li>
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/repos">Repos</NavLink></li>
</ul>
{this.props.children}
</div>
)
}
})
|
저장하고 빠져 나온 후 npm start를 한 후 브라우저로 확인한다.
 |
| 홈 화면에 Home에 대한 링크가 형성되었다. |
 |
| 어디를 가도 홈으로 갈 수 있다. |
 |
| 홈...홈... |
 |
| 맨 하위에서도 홈을 갈 수 있다. |
2. App.js 에 IndexLink 를 이용하여 구현해 본다.
[binrang@binrang modules]$ pwd
/home/binrang/react/react-router-tutorial/lessons/09-index-links/modules
[binrang@binrang modules]$ vi App.js
import React from 'react'
import NavLink from './NavLink'
import { IndexLink } from 'react-router'
export default React.createClass({
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
<li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/repos">Repos</NavLink></li>
</ul>
{this.props.children}
</div>
)
}
})
|
이번에도 웹 화면을 확인해보면 첫번째 구현한 것과 같은 화면을 얻을 수 있다.
3. 링크에 옵션을 하나 더 추가 해 보자
<li><IndexLink to="/" activeClassName="active" onlyActiveOnIndex={true}>Home</IndexLink></li>
|
이 옵션은 하나의 링크를 활성화하는 기능이다.
<li><NavLink to="/" onlyActiveOnIndex={true}>Home</NavLink></li>
|
이렇게 해도 같은 결과를 얻을 수 있다.
참고 URL : 09-index-links
댓글 없음:
댓글 쓰기