React Native Web页面刷新后导航失效问题求助

你遇到的核心问题是动态条件渲染Stack.Screen导致React Navigation在Web端刷新时无法正确匹配URL路由：

• 页面刷新时，isLoadedToken初始为false，此时栈中仅存在Loading屏幕；
• 当token加载完成后，栈结构被替换为Home/Table或Auth组，但React Navigation已基于初始栈结构完成路由匹配，无法同步当前URL对应的屏幕；
• 后续点击Link无反应，是因为栈结构中的屏幕与URL路由不匹配，导航状态处于异常状态。

1. 保持栈结构稳定，避免动态增减Screen #

不要根据token加载状态动态移除/添加Stack.Screen，将所有屏幕都放在Navigator中，通过initialRouteName控制初始显示页面：

<NavigationContainer linking={linking} fallback={<Loading />}>
  <Stack.Navigator 
    screenOptions={{ headerShown: false }}
    // 根据token状态设置初始路由
    initialRouteName={isLoadedToken ? (token ? 'Home' : 'Auth') : 'Loading'}
  >
    <Stack.Screen name="Loading" component={Loading} />
    <Stack.Screen name="Auth" component={Auth} />
    <Stack.Screen name="Home" component={Home} />
    <Stack.Screen name="Table" component={Table} />
  </Stack.Navigator>
</NavigationContainer>

2. 在Loading组件中处理路由同步 #

在Loading组件中，当token加载完成后，检查当前URL对应的路由，避免不必要的跳转：

import { useNavigation, useRoute } from '@react-navigation/native';
import { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Linking } from 'react-native';

const Loading = () => {
  const navigation = useNavigation();
  const route = useRoute();
  const [isLoadedToken, setIsLoadedToken] = useState(false);
  const [token, setToken] = useState(null);

  useEffect(() => {
    const loadToken = async () => {
      const storedToken = await AsyncStorage.getItem('token');
      setToken(storedToken);
      setIsLoadedToken(true);

      // 解析当前URL的路由
      const url = Linking.useURL();
      const parsedRoute = url ? Linking.parseURL(url).name : null;

      if (storedToken) {
        // 已登录状态：若当前路由是Loading/Auth，跳转到URL对应的页面或默认Home
        if (route.name === 'Loading' || route.name === 'Auth') {
          navigation.navigate(parsedRoute || 'Home');
        }
      } else {
        // 未登录状态：若当前路由不是Auth，跳转到Auth
        if (route.name !== 'Auth') {
          navigation.navigate('Auth');
        }
      }
    };

    loadToken();
  }, []);

  return <Text>Loading...</Text>;
};

3. 优化Linking配置（可选） #

补充Web端本地开发的路由前缀，确保路由匹配更精准：

const linking: LinkingOptions<{
  Auth: string;
  Home: string;
  Table: string;
  Loading: string;
}> = {
  prefixes: ['alfateacherapp://', 'http://', 'http://localhost:3000'],
  config: {
    initialRouteName: 'Loading',
    screens: {
      Auth: 'auth',
      Home: 'home',
      Table: 'table',
      Loading: 'loading',
    },
  },
};

4. 简化Link组件的使用 #

直接使用字符串形式的路由路径，确保Linking配置能正确解析：

// Home页面
<Link to="table">Link to Table</Link>
// Table页面
<Link to="home">Link to Home</Link>

React Navigation在Web端依赖稳定的栈结构匹配URL路由。动态增减Screen会导致初始渲染时栈中无当前URL对应的屏幕，触发默认路由跳转（栈的第一个Screen）。保持所有Screen在栈中，让Linking可以正确匹配URL，再通过初始路由和Loading组件的逻辑控制页面显示，即可解决刷新后路由丢失和导航失效的问题。

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