React 路由组件选择与页面刷新问题分析

Posted 2022-09-08 毕小宝

背景

总结最近 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 ，改完后重新打包后可能会因为浏览器缓存问题，看不到效果，所以及时清理缓存。