react路由跳转传参刷新页面后参数丢失的解决

import { useHistory } from 'react-router-dom';
const history = useHistory();
history.push({
      pathname: '/details',
      state: {
        name: name,
        id: id,
      },
});

import { useHistory } from 'react-router-dom';
const history = useHistory();
history.push({
      pathname: '/details',
      query: {
        name: name,
        id: id,
      },
});

import { useLocation } from 'react-router-dom';
const location = useLocation();
const name = location.query.name;
const id = location.query.id;
// 获取state参数的写法
const name = location.state.name;
const id = location.state.id;

// 如果是刷新页面，则没有 state 属性，从缓存中获取
if(this.props.location.state == undefined) {
    this.props.location.state = JSON.parse(sessionStorage.getItem('data'));
}
if(this.props.location.state != undefined) {
    sessionStorage.setItem('data',JSON.stringify(this.props.location.state));
} else {
    // 缓存和path 都没有参数，则设置默认属性，保证页面不报错
    this.props.location.state = {
      // TODO 默认的参数配置，保证页面不报错
    };
}