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。这样我们需要对自己的代码进行拆分。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,019评论 3 119
  • “被噩运选中的人,通常没有什么特别之处;碰巧发生事情那天,也不过是人生中最为普普通通的一天。” 就在昨天,我的好友...
    BOXDAPP阅读 325评论 3 3
  • 很多时候,人通过阅读学习新的知识。然而很多人每天不少碎片时间都在花在了看公众号文章、看网站新闻、甚至是看纸质书,依...
    黄圈圈阅读 1,142评论 0 15
  • 苍壁礼天,祈年平安, 回音壁转,皇穹宇间, 艾叶青阶,白玉栏杆, 神乐具服,维路漫漫, 昔年盛时,不复得见, 遥望...
    时宜风安阅读 271评论 0 0