IOS跳转页面回退不刷新问题和解决办法

2024-01-21 11:19:44

React 在 iOS 中 H5 页面跳转兼容性详解

问题

在 iOS 中使用 React 开发 H5 项目时，可能会遇到页面跳转后不刷新的兼容性问题，导致无法触发 componentDidMount 等生命周期。另外，当从外部链接跳转到 React 应用时，也会出现相同的问题。

原因分析

iOS 浏览器的历史记录机制导致了这一问题。在浏览网页时，iOS 会将每个页面的 URL 保存到历史记录中，以便用户可以通过后退按钮返回到上一个页面。然而，React 采用单页应用程序（SPA）模式，即整个应用程序只有一个 HTML 页面，动态加载和卸载不同组件，因此跳转页面不会导致历史记录改变。

当用户点击后退按钮时，浏览器会尝试从历史记录中获取上一个页面的 URL 并重新加载该页面，但由于 React 应用没有将新的 URL 保存到历史记录中，因此浏览器会重新加载上一个页面，而不是当前页面。

解决方案

使用 browserHistory

import { createBrowserHistory } from "history";
const history = createBrowserHistory();

在项目根目录下的 index.js 文件中进行以下设置：

import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter history={history}>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

使用 HashHistory

import { createHashHistory } from "history";
const history = createHashHistory();

在项目根目录下的 index.js 文件中进行以下设置：

import { HashRouter } from "react-router-dom";
ReactDOM.render(
  <HashRouter history={history}>
    <App />
  </HashRouter>,
  document.getElementById("root")
);