react怎么存上一页_React如何优雅地写单页面应用？

为了追求极致的用户体验，很多Web应用采用单页面方式呈现，然而单页面应用，往往对应着高复杂度，比如多层次路由配置、统一数据处理等，这需要项目有一个强大的技术架构和友好的构建环境来支撑。路由器，作为单页面构建的基础，对单页面应用的开发、加载、运行各个环节都起着至关重要的作用，项目体量越大，对路由器的依赖表现越强。

下面是一个React应用的基础路由配置，了解React的同学一定不陌生：

const App = ()=> {

return (

)

}

ReactDOM.render(, document.getElementById('root'))

是啊，路由配置不就这么简单吗？

真正做过单页面应用的同学要反驳你了，并且会立刻提出很多问题：路由配置拆分怎么做？

动态加载怎么做？

props怎么传递？

登录拦截怎么做？

列表页能不能缓存？

balabala......

能遇到这些问题的同学，相信一定是饱经风霜了。这些问题，Demo中是不会有的，都是真实项目中才能遇到的。

当然，这篇文章，就是为解决这些问题而生的，下面我们以React-Keeper(以下简称Keeper)为例，来解决这些问题。

BTW: React-Keeper是React生态里一款较新的开源路由库，由国内团队开发，借鉴了React-Router 4很多特点，不过灵活性、实用性都强于React-Router很多，而且兼容React-Router常用用法，其文档和代码可以参见React-Keeper GitHub官网。

1. 路由拆分

集中化的路由配置是一个很糟糕的方案，尤其是在大型Web应用中，路由拆分是很有必要的。

Keeper实现路由拆分的方式：

const App = ()=> {

return (

)

}

const Products = ()=> {

return (

)

}

ReactDOM.render(, document.getElementById('root'))

实际开发中可以将大量的路由配置信息，按照模块化的方式进行拆分，跟路由只引入模块入口，内部页面配置在模块内部，模块内可以再切分二级模块，以此实现路由的拆分。

2. 页面缓存

页面缓存是Keeper最重要的特性，保留用户前一个页面的所有状态(数据、各种交互状态等)对单页面应用是非常重要的，例如：在商品列表页点击进入商品详情页，然后返回列表页时，用户希望数据还是之前的数据，页面还停留在刚才的滚动位置。在Router中我们实现这种交互的方式，只能利用父子组件关系，而这经常会导致一个页面有多个URL，违背资源单一地址原则。

Keeper创造性地提供了页面缓存的功能，通过内置的缓存管理器，在页面未匹配激活时，保留用户所有的交互状态，在页面激活后对状态进行恢复。在Keeper中实现缓存也非常简单，只需要添加一个cache标记：

该标记表示页面永久缓存，针对不同场景，Keeper提供三种缓存方式：

cache='root' (或cache) : 永久缓存该路由对应页面，直至路由器销毁。

cache='parent' : 在父组件匹配的情况下缓存该路由页面，直至父组件不匹配。

LinkCache :集成缓存管理器的Link组件，为临时缓存，点击返回或跳转至其他页面，缓存即失效。

我们在使用时应根军不同的业务模块场景采用不同的缓存策略。

3. 动态加载

把所有的JS文件打包为一个文件并不是一个明智的选择，这样会严重拖慢首屏的加载时间，JS代码应该是分割的，并且是按需加载的。

Keeper实现按需加载的方式：

// 定义动态加载函数const loadProduct = (cb)=> {

import('../Products.js').then((Products)=>{

cb(Products)

})

}

// 通过loadComponent属性引入

4. props传递

我们知道在React-Router中并不支持自定义props的传递，然而这在Keeper中支持得很好：

let hostUser = { id: 'ASDFSDFG', name: '马化腾' }

// 父组件中通过props传入Route (hostUser)const Products = ()=> {

return (

)

}

// Route组件所有的props自动传入子组件const ScienceProducts = (props)=> {

return (

{ props.hostUser.name }

)

}

5. 登录拦截

登录拦截、权限检测、表单关闭检测，这些是业务中非常常见的场景，而这也在Keeper中得到了很好的支持。

Keeper提供了两种过滤器来对路由的状态变化进行过滤和拦截：EnterFilter和LeaveFilter。

EnterFilter: 进入页面之前执行的过滤器，适用于登录检测、权限检测一类的场景。

LeaveFilter： 页面解绑之前执行的过滤器，适用于表单关闭检测一类的场景。

// 定义过滤器，内部通过callback进行流程控制const loginFilter = (callback, props)=> {

if(!props.host) {

new Promise((resolve, reject)=>{

// some code }).then(callback);

}

}

// 将过滤器加入Route

// 多过滤器配置

6. 进阶

Keeper提供了很灵活的配置方式，以让我们简单的写出优雅的代码。从下面看几个场景切入介绍下Keeper常用配置的使用。

Q1:页面未找到时显示默认

A1:使用Route提供的miss属性，当页面找不到的时候自动渲染该组件。

Q2: 进入一个模块直接进入模块引导页

A2: 使用Route提供的index属性，和miss使用方式雷同，并且可以和miss一起使用。

Q3: 组件地址重定向的处理

A3: 使用Route提供的redirect属性，当其他条件匹配完成时，自动进行页面重定向。

Q4: 如何使用history的state属性？

A4: Keeper内部集成了state代理，对支持state API的浏览器，直接使用state API；对其他浏览器使用内部集成的state管理器，即使用随机ID(URL中加入随机key)来映射state，并使用sessionStorage进行存储。

写在最后

React-Keeper是一款新兴的React路由库，由于其灵活的设计和强大的实用功能，一经发布便引起众多React开发者关注与尝试。

React-Keeper刚刚发布了V2.0版本，在底层很多地方做了优化。不过新兴框架，文档还不健全，目前开发者的使用方式，都是依赖其GitHub官网文档，目前尚未有中文文档。

一句话点评React-Keeper: 学习自React-Router，却远超过React-Router。

附录