Reactjs路由组件x-react-router

2023年2月8日 223次阅读 来源: VeeQun

原本想用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. 其他

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

    原文作者：VeeQun
    原文地址: https://www.jianshu.com/p/cda62ba11c6c
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞