React的几种路由配置方法

1.标签（常用）

import { IndexRoute } from 'react-router'

const Dashboard = React.createClass({
  render() {
    return <div>Welcome to the app!</div>
  }
})

React.render((
  <Router>
    <Route path="/" component={App}>
      <IndexRoute component={Dashboard} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

IndexRoute相当于是首页的路由配置

1. 对象
   以对象的形式配置路由，写法如下：

const routeConfig = [
  { path: '/',
    component: App,
    indexRoute: { component: Dashboard },
    childRoutes: [
      { path: 'about', component: About },
      { path: 'inbox',
        component: Inbox,
        childRoutes: [
          { path: '/messages/:id', component: Message }
        ]
      }
    ]
  }
]

React.render(<Router routes={routeConfig} />, document.body)

1. 按需加载
   在一个很大大项目中，我们一开始可能并不需要用到那么多的功能，只需要部分，如点击一个按钮出现一个功能界面。我们可以不必在载入界面的时候就加载所有的js,可以在点击那个按钮时再加载对应js。这样我们需要对自己的代码进行拆分。