[React Router] 08. Index Routes

React Router

08. Index Routes

소스코드 : https://github.com/reactjs/react-router-tutorial/tree/master/lessons/08-index-routes

---

초기 어플리케이션 방문 시 , React Route에 따라 빈 페이지가 나오게 됩니다.

더이상 빈 페이지가 아니라, 초기 Home Component를 보여주고 싶습니다.

일단, Home Component를 만들어볼까요.

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

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

기존의 App Component("/)에 다른 하위 Component가 있다면, Home대신에 이를 보여줘야 합니다.

이를 위하여 App.js를 다음과 같이 수정합니다.

// App.js

// ...

  {/* ... */}
  {this.props.children || }

//...

하지만, 이와 같은 방식은 기존에 

Repos, About Component를 추가한 것과 동일한 방식입니다.

이렇게 구성하게 되면, 

1. Data Fetching에 얽히고

2. onEnter hook에 연관되고 

3. code-spliting에 관여되게 됩니다. 

이와 별개로 

App Component와 Home Component를 분리할 수 있습니다.

// index.js
// new imports:
// add `IndexRoute` to 'react-router' imports
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
// and the Home component
import Home from './modules/Home'

// ...

render((
  
    

      {/* add it here, as a child of `/` */}
      

      
        
      
      
    
  
), document.getElementById('app'))

기존과 다르게 사용한것은 IndexRoute입니다.

IndexRoute에 Path가 없는것을 보실 수 있습니다.

만약 다른 Route에 해당되지 않는 요청이 왔을 경우, IndexRoute가 부모의 this.props.children이 됩니다.