后台管理路由跳转回来怎么保留搜索表单参数？-灵析社区
明道后台管理大致有两种页面 一种是带搜索表单和表格的数据展示页面 在下面称A页面 一种是表单的数据新增/编辑页 在下面称B页面 现在需要在A跳到B的时候 记录表单的搜索状态 等B回到A的时候 把状态重新赋值给表单 想问下大佬们有没有好的方法 我目前只能想到一个方法 1：从A去B的时候把搜索表单的参数拼接到地址栏 然后点返回A的时候 把参数再带回A 然后去重新赋值 但是感觉可维护性和可阅读性都很差,而且需要一个页面一个页面的做处理，需要A跳B的页面也很多 另外觉得监听路由变化做处理是最简单也是最好维护的 但是具体咋做还在想 想法还没有打通 补充：有第二种想法是因为维护过一个后台管理项目 做法比较'新颖'(我第一次见) 表单表格字段以及值（例如obj:{name:1},obj、name、1 三个都是后端在数据库维护的） 每个页面调一个接口 传当前页面的pathname 然后后端返回一堆配置 然后前端页面都是组件化 所以它那个项目监听路由变化很简单 因为所有的页面 都是用的一个公共大组件
Kapp啊$0920这种来回跳的参数，"url"参数、"storage"、弹层都可以，封装一个工具统一来处理，都差不多。
你说的第二种，应该是属于表单保存功能，就是填到一半，点击保存，下次回来可以继续填，这种用接口来做。
下面是路由方案：
利用"PersistState"这个高阶组件，让列表页的状态持久化。
"列表和详情页（路由方案）" (https://link.segmentfault.com/?enc=oxanlOjtDHQyOHVgaDQRaw%3D%3D.fclKZFH0vX29gGQNVJqzfQRkQYTjB2TbIC1bhtp%2F3mxx5%2BHvxbrUE43BZkG30GANgapMvdajw1UlLElr0uLnZA%3D%3D)
import React, { useState, useEffect } from 'react';
import { RouterProvider, createHashRouter } from 'react-router-dom';
function Detail() {
const onNavigate = () => {
router.navigate('/');
};
return (
Detail
go to list
);
}
const PersistState = (WrappedComponent) => (props) => {
const initialState = JSON.parse(localStorage.getItem('persistState'));
const [state, setState] = useState(initialState);
useEffect(() => {
localStorage.setItem('persistState', JSON.stringify(state));
}, [state]);
return ;
};
function List({ state, setState }) {
const onNavigate = (id) => {
router.navigate(`/detail/${id}`);
};
return (
List
setState((_state) => ({
..._state,
name: e.target.value,
}))
}
/>
onNavigate('1')}>数据1
onNavigate('2')}>数据2
onNavigate('3')}>数据3
);
}
const PersistStateList = PersistState(List);
const router = createHashRouter([
{
path: '/',
element: ,
},
{
path: '/detail/:id',
element: ,
},
]);
function App() {
return ;
}
export default App;
手动持久化
const PersistState = (WrappedComponent) => (props) => {
const initialState = JSON.parse(localStorage.getItem('persistState'));
const [state, setState] = useState(initialState);
const save = () => {
localStorage.setItem('persistState', JSON.stringify(state));
};
const clean = () => {
localStorage.remove('persistState');
};
return (
);
};