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

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

在history中使用state确实可以传参数，在进入页面时可以正常显示，但是在刷新页面后state里面的数据会清空，页面就无法正常显示。

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

使用query是在跳转链接中增加参数，可以在实现传参的同时刷新页面后数据不会丢失，但是如果传的参数过多链接会很长。

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;

这是在跳转页面获取参数的方式

（亲测有效，但是会有类型报错）

react路由组件选择与页面刷新问题

总结最近 React 开发遇到的几个问题及解决过程。

state 跳转数据丢失问题

通过 state 传递数据的方式进行跳转时，如果 F5 刷新页面，会丢失参数导致页面异常。

解决办法之一可以用缓存：

// 如果是刷新页面，则没有 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 默认的参数配置，保证页面不报错
    };
}

将请求参数转换为 JSON 字符串缓存到本地，网上还有一种方式是用 Qs 转换，测试发现它有一个问题，就是数值类型的的值被序列化为字符串了，导致数据类型与之前不一致。

如果清空了缓存后，再执行刷新操作，那么 else 分支中配置的默认参数会生效。

search 方式

笔记简单的跳转方式是用 search 方式，将参数序列化。

用 Qs 序列化数据到 search 后浏览器地址栏会变得特别长，感觉不是很友好。

antd Table 的分页配置

antd 的 Table 组件，它的pagination 配置中，决定当前页码的参数名叫 current，在一些跳转返回的需求中，可能返回列表的页码不是初始 1，此时需要注意参数名称。

这个参数名称容易与后台提交时的分页参数弄混，所以必须牢记。

BrowserRouter 刷新后 404 问题

如果 React 项目使用 BrowserRouter 的路由，存在一个问题，F5 刷新页面的时候，会出现 404 空白页。

解决办法是改成 HashRouter ，改完后重新打包后可能会因为浏览器缓存问题，看不到效果，所以及时清理缓存。

总结