react怎么存上一页_React 跨页面保留前一页状态的一种实现方法

功能需求：React单页应用的时候，用户打开A页面，然后操作了A页面相关功能，比如在table里面进行了筛选，选中了几个选项。 然后点击查看详情跳转到B页面，B页面操作完的时候，点击按钮跳转到A页面，这时候A页面之前选中的几个选项往往会丢失，这时候需要怎样做才能对A页面操作的状态进行保留。

实现思路：因为进入B页面，往往则需要点击按钮或操作某个事件，那么这里就可以对路由进行一个传参操作，带入到B页面。然后B页面接收到A页面传过来的参数，操作完B页面功能之后点击跳转返回到A页面的时候，再把之前传给B页面的参数传给A页面即可。

首先我们要知道 React 路由跳转是可以通过dom和js的形式进行跳转，这里则采用js形式进行参数传递(这里我采用的React Hooks写法进行案例编码)。

A页面代码片段：

import React, { useState } from 'react';//引入要用到的 hooks

import { useHistory, useLocation } from 'react-router-dom';functionaPage(){//页面跳转钩子

const history =useHistory();//这个 state 为主要保留操作记录的钩子

const { state } =useLocation();//首先一开始进入到A页面state肯定是为 {} 空对象的，那么nameFilters值则为null,一旦 nameFilters 设了值之后，那么点击跳转执行跳转方法设置了state值，那么则会得到不为空的对象。

const [nameFilters, setNameFilters] =useState(

(state&& state.nameFilters) || null);//假如第一步点击了操作按钮进行了值的设置

const firstStep=()=>{

setNameFilters([11,22,33]);

}//第二步点击了详情按钮跳转到了B页面，并携带了最新的 nameFilters 给state，那么当前的 state 就包含了 nameFilters 字段和值。

const second=()=>{

history.push({

pathname: `/aPage/${id}`,

state: { from:'/aPage', nameFilters },

});

}

}

B页面代码片段：

//还是使用 useLocation 钩子，进行state的值的获取

import { useLocation } from 'react-router-dom';functionbPage(){

const { state }=useLocation();//假如点击了返回按钮触发了该方法，并把state带回给A页面，A页面即可根据state

//的值进行对A页面的设值。

const backPage = () =>{

const { history }=props;

history.push({

pathname:'/aPage',

state,

});

};

}

useLocation的state理解：其实我们就可以把state理解成为url ?号后面的参数，只是react把这些参数进行了隐式传参。

注意项：设了state值之后，把页面刷新，其实state的值是不会丢失的，这里有点像sessionStorage，只有关闭当前页面或跳转到其它页面才会消失，所以需要注意在离开页面的时候必要的时候需要清空一下state，保持“干净”。

钩子api地址：https://reactrouter.com/web/api/Hooks

案例代码：这里因为是随意写的完整代码，所以还需要配置一下路由才能运行，这里这是提供完整的A页面和B页面代码，不提供其它页面的逻辑代码，路由需要自己另行配置。

/a-page/index.js

import React, { useEffect, useState } from 'react';

import { Table, Button } from'antd';

import { useHistory, useLocation } from'react-router-dom';functionAPage() {

const history=useHistory();

const { state }=useLocation();

const [nameFilters, setNameFilters]=useState(

(state&& state.nameFilters) || null);

const columns=[

{

title:'Id',

dataIndex:'id',

key:'id',

},

{

title:'名称',

dataIndex:'name',

key:'name',

filters: [

{ text:'监测点一', value: '监测点一'},

{ text:'监测点二', value: '监测点二'},

],

filteredValue: nameFilters,

},

{

title:'id',

dataIndex:'id',

key:'id',

render: (item)=>{return(

onClick={lookDetail.bind(this, item)}

type="primary"

>详情

);

},

},

];

const dataSource=[

{ id:'00_a', name: '监测点零'},

{ id:'11_b', name: '监测点一'},

{ id:'22_c', name: '监测点二'},

{ id:'33_d', name: '监测点三'},

];

const lookDetail= (id) =>{

history.push({

pathname: `/a-page/${id}`,

state: { from:'/a-page', nameFilters },

});

};

const handleTableChange= (pagination, filters, sorter) =>{

const { name }=filters;

setNameFilters(name);

};

useEffect(()=>{

console.log(state);

}, [state]);return(<>

columns={columns}

dataSource={dataSource}

rowKey={(data) =>{return`${data.id}`;

}}

onChange={handleTableChange}/>

>

);

}

exportdefault APage;

View Code

/a-page/detail/index.js

import React from 'react';

import { useLocation, useHistory } from'react-router-dom';

import { Button } from'antd';functionDetail() {

const history=useHistory();

const { state }=useLocation();

const backPage= () =>{//带回给 A 页面

history.push({

pathname:'/a-page',

state,

});

};return(<>

返回

>

);

}

exportdefault Detail;

View Code