[React Router] 06. Params

React Router

06. URL Params

소스코드 : https://github.com/reactjs/react-router-tutorial/tree/master/lessons/06-params

---

Spring에서와 같이 URL Parameter를 획득하여 사용할 수 있습니다.

예를 들어, 

/repos/rackt/react-router
/repos/facebook/react

와 같은 URL이 있을 경우 

/repos/:userName/:repositoryName

와 같은 URL Parameter를 통해 각 parameter를 얻을 수 있습니다.

rackt, facebook -> userName

react-router, react -> repositoryName 에 각각 mapping됩니다.

위 방식으로 얻은 parameter들은 

{this.props.params.userName},

{this.props.params.repositoryName} 으로 사용할 수 있습니다. 

이를 직접 예제를 통해 해보겠습니다.

1. modules/Repos.js 파일을 새롭게 생성합니다. 

// modules/Repo.js
import React from 'react'

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

        
{this.props.params.repoName}
      
    )
  }
})

2. index.js에 다음과 같이 route를 추가합니다.

// ...
// import Repo
import Repo from './modules/Repo'

render((
  
    
      
      
      {/* add the new route */}
      
      
    
  
), document.getElementById('app'))

3. 기존의 modules/Repos.js에 Link를 추가합니다.

// Repos.js
import { Link } from 'react-router'
// ...
export default React.createClass({
  render() {
    return (
      

        
Repos

        {/* add some links */}
        

          
React Router
          
React
        

      
    )
  }
})