Reactjs路由组件x-react-router

原本想用react-route、react-routing命名,但是,npm中都已经有了。x表示extend
先附上项目地址:https://github.com/vqun/x-react-router

出于对前辈react-router的崇拜,以及考虑到从react-router迁移的成本,x-react-router的设计第一原则:

x-react-router原则一:保持react-router风格

具体来讲,我们希望在使用x-react-router时,使用如下的模式:

<Router history={history}>
  <Route path="/" component={App}>
    <Route path="home" component={Home} />
    <Route path="users" component={Users}>
      <Route path="/user/:userId" component={User} />
    </Route>
    <Route path="*" component={NoMatch} />
  </Route>
</Router>

是的,这和react-router是一样的,但是,也有不同,也就是第二原则:

x-react-router原则二:支持异步加载,支持多页面

事实上,react-router假定你的所有组件都是“已存在”,对于SPA来讲,这已经是足够的。然而,当我们需要的是多页面时候呢,react-router并不能为我们很好的实现这方面的工作。同时,这里所说的多页面,与传统的多页面也是不一样的。

传统的多页面,在页面跳转时,前一个页面资源将会“丢失”,而HTTP(s)是无状态的,很多时候,两个页面间可以共用这么多的数据、资源甚至状态,都将在页面跳转时丢失,这可以说是多页面的一大弊端。与之相反,SPA的出现则避免了这个问题。尤其在移动端盛行时,Hybrid模式更是让SPA得到了进一步的发展。

SPA(单页面应用程序)将所有的“页面”融合到了一个页面中,使页面在跳转时,保留了前一个页面的资源、状态和数据,以及保证了这些资源的共享,在很多时候,可以避免了重复性的资源请求(特别是状态和数据的请求)。似乎SPA是一个很好的模式,然而,SPA却也承担着另外的问题:

  1. SEO识别困难:可以说这是最大的难题
  2. 大型SPA,内存消耗如何解决:随着页面的增加,内存的消耗是惊人的

于是,今天提到的多页面就是我们希望的模式。我喜欢叫它:C-SPA。

C-SPA:Client-side Single Page Application,译为客户端单页面应用程序。
C-SPA需要满足以下条件:

  1. 每个页面都有其对应的URL,每个URL都可以单独访问
  2. 任一页面加载后,其余页面自动以SPA形式加载

关于C-SPA,有空可以考虑写个感想。

回到原则二上,支持异步加载,从路由配置上讲:

<Router history={history}>
  <Route path="/" component={App}>
    <Route path="home" component={Home} />
    // ... other routes
    <Route path="about" component="path/to/about-controller" />
  </Route>
</Router>

可以看“about”的Route,与其他不同的是,component使用的不是一个确切的组件,而是一个链接。因为我们希望,只有用户真正访问到about页面时,再去加载about的控制文件,之后的事情就交给控制文件处理。可以说,这里的about Route实际上只是一个“根据路由加载文件”的功能。而真正的组件/页面渲染,则是由控制文件完成。对于控制文件,则是另一个路由配置。因为先前的配置只是用于加载文件的路由配置,渲染的路由配置就必须在控制文件中完成。因此,对于about的控制文件,需要有如下的配置:

<Router history={history}>
  <Route path="/" component={App}>
    <Route path="about" component={About} />
  </Route>
</Router>

当然,上面的配置显然是不足的,因为如果我们访问的是/about页面,页面加载的是上面的控制文件,这时候配置里并没有其他页面的路由配置,因此,我们需要将其他页面的路由配置写入上述的控制文件中:

<Router history={history}>
  <Route path="/" component={App}>
    <Route path="home" component="/path/to/home-controller" />
    // ... other routes
    <Route path="about" component={About} />
  </Route>
</Router>

除了和react-router类似的模式,以及增加了原则二的功能,x-react-router还有其他小的功能,如:

  1. 支持在Route中嵌套非Route的React Component;
  2. 支持自定义props传入
  3. 所有的组件都可以通过定义contextTypes来获取location信息
  4. 路由嵌套关系亦即组件嵌套关系
  5. 其他

暂时先写这么多,后续会慢慢补充一些使用的心得。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 68,673评论 12 116
  • Lesson11、首先确保安装了Node.js和npm依赖包管理工具2、在git上克隆官方示例程序 git clo...
    冰_心阅读 1,830评论 0 16
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 PS:转载请注明出处作者:TigerChain地址:http...
    TigerChain阅读 3,853评论 2 39
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 123,136评论 15 534
  • 记不清是那个版本的iso系统 ,对click事件支持不好 绑定事件时判断设备,如果是ISO设备则绑定为touch...
    else05阅读 276评论 0 0