Expo Router Web端页面刷新后导航状态丢失问题

我之前也碰到过这个一模一样的问题！Expo Router 在 Web 端默认把导航栈状态存在内存里，页面刷新后内存状态直接清空，导致浏览器的历史栈和 Expo Router 内部的导航栈没同步上，点返回按钮自然就会抛出“无历史页面”的错误。下面给你几个亲测有效的解决办法：

方法一：用 sessionStorage 持久化导航栈状态 #

sessionStorage 和当前浏览器标签页绑定，页面刷新不会丢失，关闭标签页才会清空，刚好适配导航栈的生命周期。我们可以监听导航变化，把路由状态存在 sessionStorage 里，刷新后再恢复。

你可以在根布局文件（比如 app/_layout.jsx）中添加如下逻辑：

import { useRouter, usePathname, useSearchParams } from 'expo-router';
import { useEffect } from 'react';

export default function RootLayout() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  // 监听路由变化，更新持久化的导航栈
  useEffect(() => {
    const currentRoute = {
      pathname,
      search: searchParams.toString(),
    };

    let navigationStack = JSON.parse(sessionStorage.getItem('expoNavigationStack')) || [];
    // 避免重复添加相同路由（比如连续点击同个链接）
    const lastRoute = navigationStack.at(-1);
    if (!lastRoute || lastRoute.pathname !== pathname || lastRoute.search !== currentRoute.search) {
      navigationStack.push(currentRoute);
      sessionStorage.setItem('expoNavigationStack', JSON.stringify(navigationStack));
    }
  }, [pathname, searchParams]);

  // 自定义返回逻辑，优先读取持久化的导航栈
  const handleCustomBack = () => {
    let navigationStack = JSON.parse(sessionStorage.getItem('expoNavigationStack')) || [];
    if (navigationStack.length > 1) {
      // 弹出当前路由，获取上一个路由
      navigationStack.pop();
      const previousRoute = navigationStack.at(-1);
      // 跳转到上一个路由
      router.push({
        pathname: previousRoute.pathname,
        params: Object.fromEntries(new URLSearchParams(previousRoute.search)),
      });
      // 更新持久化的栈
      sessionStorage.setItem('expoNavigationStack', JSON.stringify(navigationStack));
    } else {
      // 栈中只剩初始页面，使用浏览器默认返回
      window.history.back();
    }
  };

  // 记得把应用中所有的返回操作替换成这个自定义方法
  // 比如在页面中用 <Button title="返回" onPress={handleCustomBack} />
}

方法二：同步浏览器 history 栈与 Expo Router 内部栈 #

另一种思路是让浏览器的原生历史栈完全主导导航逻辑，避免 Expo Router 内部栈和浏览器栈脱节。我们可以监听浏览器的 popstate 事件，在用户点击返回时同步路由状态：

import { useRouter, usePathname } from 'expo-router';
import { useEffect } from 'react';

export default function AnyPage() {
  const router = useRouter();
  const pathname = usePathname();

  // 监听浏览器返回事件，同步到 Expo Router
  useEffect(() => {
    const handlePopState = (event) => {
      if (event.state?.pathname) {
        router.push(event.state.pathname);
      }
    };

    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, [router]);

  // 自定义导航方法，同时更新浏览器 history 和 Expo Router
  const navigateTo = (targetPath) => {
    window.history.pushState({ pathname: targetPath }, '', targetPath);
    router.push(targetPath);
  };
}

这样每次导航都会同步更新浏览器的历史记录，刷新后浏览器的返回按钮就能正确触发对应的路由跳转。

方法三：升级到最新版 Expo Router #

官方一直在优化 Web 端的导航体验，如果你使用的是 SDK 48 及以下的旧版本，建议升级到最新稳定版的 Expo 和 Expo Router，官方可能已经修复了导航栈同步的问题：

npx expo upgrade
npm install expo-router@latest

升级后可以先测试默认的导航逻辑，很多时候刷新后返回按钮的问题会直接消失。

额外注意事项 #

• 不要用 localStorage 存储导航栈：localStorage 是跨标签页共享的，会导致不同标签页的导航状态互相干扰，sessionStorage 是更安全的选择。
• 处理路由参数：持久化路由时要记得保存查询参数和路由参数，避免恢复路径时丢失关键信息。
• 复杂路由场景：如果你的应用有嵌套路由、动态路由，需要在持久化逻辑中额外处理这些场景，确保路由恢复的完整性。

这些方法我都在自己的项目中试过，第一种 sessionStorage 持久化的方案最稳妥，基本能覆盖大部分场景。你可以根据应用的复杂度选择合适的方案~

内容来源于stack exchange