React.js中如何阻止硬刷新时跳转至page 1页面？

核心原因 #

硬刷新时React应用会完全重启，默认情况下如果你的路由配置把page1设为了兜底匹配项，或者没有让路由和URL路径绑定，就会自动回到page1。你提到的useRef其实不适合这个场景——因为useRef存储的是组件内的临时状态，刷新后会被重置，无法持久化页面信息。

推荐解决思路（优先用路由规范方案） #

如果你的页面是通过路由管理的（应该是绝大多数场景），直接让路由和URL路径绑定，硬刷新时浏览器会保留当前URL，React Router会自动匹配对应页面：

1. 配置React Router路由
   确保每个页面都对应独立的URL路径，只把page1作为兜底路由（仅当URL不匹配任何页面时才跳转）：

   import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
   
   function App() {
     return (
       <Router>
         {/* 主菜单：用Link组件或者a标签指向对应URL */}
         <nav>
           <a href="/page1">Page 1</a>
           <a href="/page2">Page 2</a>
           <a href="/page3">Page 3</a>
           <a href="/page4">Page 4</a>
         </nav>
         <Routes>
           <Route path="/page1" element={<Page1 />} />
           <Route path="/page2" element={<Page2 />} />
           <Route path="/page3" element={<Page3 />} />
           <Route path="/page4" element={<Page4 />} />
           {/* 仅当URL路径不匹配任何页面时，才跳转到page1 */}
           <Route path="*" element={<Navigate to="/page1" replace />} />
         </Routes>
       </Router>
     );
   }
   

   这种方式下，用户在page2硬刷新时，浏览器URL还是/page2，React Router会自动渲染Page2组件，不会跳转到page1。

2. 如果没使用React Router（纯状态切换页面）
   要是你是用组件内状态控制页面显示（不推荐，不利于URL分享和SEO），可以用sessionStorage持久化当前页面标识：

   import { useState, useEffect } from 'react';
   
   function App() {
     // 初始化时优先读取sessionStorage里的页面，没有则默认page1
     const [currentPage, setCurrentPage] = useState(() => {
       return sessionStorage.getItem('currentPage') || 'page1';
     });
   
     // 切换页面时保存到sessionStorage
     const switchPage = (page) => {
       setCurrentPage(page);
       sessionStorage.setItem('currentPage', page);
     };
   
     return (
       <div>
         <nav>
           <button onClick={() => switchPage('page1')}>Page 1</button>
           <button onClick={() => switchPage('page2')}>Page 2</button>
           <button onClick={() => switchPage('page3')}>Page 3</button>
           <button onClick={() => switchPage('page4')}>Page 4</button>
         </nav>
         {/* 根据当前状态渲染对应页面 */}
         {currentPage === 'page1' && <Page1 />}
         {currentPage === 'page2' && <Page2 />}
         {currentPage === 'page3' && <Page3 />}
         {currentPage === 'page4' && <Page4 />}
       </div>
     );
   }
   

关键提醒 #

• 尽量用React Router的方案，这是前端路由的标准做法，能保证URL和页面状态一致，用户可以通过URL直接访问指定页面。
• useRef在这里没用，因为它的存储是组件级临时的，刷新后就没了，无法跨页面刷新保留状态。

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