使用 React 进行前端单页面应用开发,常用的页面路由组件为 React Router。那么在使用 React Router 时,如何实现路由(页面)回退时,状态记忆功能呢?

首先,了解一下,何为页面状态记忆?在此,以一个示例来说明,看一下,以下两张阿里云管理控制台的截图,A 图为云主机列表页面,B 图为点击 A 右侧的“管理”按钮后的跳转页面; 在 B 页面操作后,点击左上角的“返回”,页面会再返回 A 页面;此时,A页面中的条件选择框中还能记忆住之前选择的时间条件,这种交互,称之为状态记忆。

  • 图A:

  • 图B:

了解了何为状态记忆后,下面就来实现此功能。

传统解决办法(非单页面开发)

在传统的多页面开发时,一般会采用在 A 页面的 URL 携带参数的办法,打开 B 页面时,采用新页面打开(新 Tab 页或新窗口),点击返回,直接将 B 页面关闭。

React Router 中提供的办法

在使用 React 开发单页面应用时,一般不会打开新页面。B 页面返回,一般采用以下方法:

1
this.props.history.goBack();

而使用此方法返回,A 页面的状态是不能记忆的;需要在 A 页面,在修改条件(或提交查询时),将之前的查询条件保存到 React Router 的路由历史中,使用以下方法:

1
this.props.history.replace(this.props.location.pathname, state);

以上 repalce 方法,第一个参数为当前页面的 url;第二个参数为要保存的状态。在 A 页面中,可以使用以下方法获取到之前保存的状态,来处理相应的逻辑:

1
let state = this.props.location.state;