ReactJS实现浏览器刷新时自动重定向至商品列表第一页

我的商品页面URL为http://localhost:3000/product?page=1，页面底部设有Load More按钮，点击该按钮会无刷新修改URL为http://localhost:3000/product?page=2并展示对应页码的商品。我需要实现：当用户刷新浏览器且当前page>1时，自动重定向到page=1，即不允许在page>1的情况下刷新页面，核心需求是检测页面刷新。

我尝试了以下代码，但未生效：

if (window.performance) {
  if (PerformanceNavigationTiming.type == 1) {
    alert( "This page is reloaded" );
  } else {
    alert( "This page is not reloaded");
  }
}

你之前的代码存在两处问题：一是直接访问PerformanceNavigationTiming.type的方式错误，二是使用了已废弃的数字类型判断规则。以下是修正后的实现方案：

1. 正确检测页面刷新行为 #

现代浏览器中，PerformanceNavigationTiming的type属性为字符串类型，需通过performance.getEntriesByType('navigation')[0]获取导航条目后再判断类型，合法取值包括'reload'（刷新）、'navigate'（首次访问）、'back_forward'（前进后退）等。

2. 结合URL参数实现重定向 #

将以下代码放在页面加载时执行的位置（比如<script>标签头部或项目入口文件最上方）：

// 解析URL中的page参数
const urlParams = new URLSearchParams(window.location.search);
const currentPage = parseInt(urlParams.get('page')) || 1;

// 检测页面是否为刷新加载
if (window.performance) {
  const navigationEntry = performance.getEntriesByType('navigation')[0];
  // 若为刷新且当前page大于1，重定向到page=1
  if (navigationEntry?.type === 'reload' && currentPage > 1) {
    window.location.href = 'http://localhost:3000/product?page=1';
  }
}

关键说明 #

• 避免使用已废弃的performance.navigation.type数字常量（如1代表刷新），改用标准的字符串类型判断。
• 使用可选链navigationEntry?.type防止部分浏览器不支持该API时抛出错误。
• 确保代码在页面渲染前执行，避免刷新后先加载page>1的内容再跳转。

内容的提问来源于stack exchange，提问作者Abhishek kamal