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相当于是首页的路由配置
- 对象
以对象的形式配置路由,写法如下:
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)
- 按需加载
在一个很大大项目中,我们一开始可能并不需要用到那么多的功能,只需要部分,如点击一个按钮出现一个功能界面。我们可以不必在载入界面的时候就加载所有的js,可以在点击那个按钮时再加载对应js。这样我们需要对自己的代码进行拆分。