[React Router] 03. Navigating with Link

React Router

03. Navigating with Link 

소스코드 : https://github.com/reactjs/react-router-tutorial/tree/master/lessons/03-navigating-with-link

---

아마도 우리의 앱에서 가장 많이 사용되는 Component는 Link일 것이다.

Link는 우리가 아는<a/> 태그의 기능과 유사한 역할을 하는 Router의 Component이다. 

// modules/App.js
import { Link } from 'react-router'

export default React.createClass({
  render() {
    return (
      



        
React Router Tutorial
        

          
About
          
Repos
        
      
    )
  }
})

이제 http://localhost:8080/에 접속하여 link를 통해 이동하고, 뒤로 이동하는 등 자유롭게 이동해보자.

+

Link에 대해서 추가 설명을 덧붙이자면 

<link to ="/about"> 을 클릭하게 되면 url이 /about으로 변경된다. 

하지만 그렇다고 해서 server rendering을 거치는 것은 아니다.

url변경이 되고나면 이를 Router가 감지한다. 

Router에 등록 된 Route 중 해당 경로에 맞는 Route를 찾는다.

위 예제에서는 

"<Route path="/about" component={About} />" 이 Route가 해당된다.

이 Route는 "/about"으로 url이 변경되면 "About" Component를 rendering하라는 뜻이다.

따라서, 

Link -> URL -> Route -> rendering 으로 작업이 일어난다.