React Native Navigation路由匹配警告未解决求助

控制台警告 #

WARN 从URL解析的导航状态包含根导航器中不存在的路由。这通常意味着链接配置与导航结构不匹配。

原始代码 #

type RootStackParamList = {
  GameList: undefined;
  GameInfo: { gameId: string };
};

const Stack = createStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <Provider store={store}>
      <NavigationContainer independent={true}>
        <Stack.Navigator initialRouteName="GameList">
          <Stack.Screen name="GameList" component={GameList} />
          <Stack.Screen name="GameInfo" component={GameInfo} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

添加linking配置后的代码 #

type RootStackParamList = {
  GameList: undefined;
  GameInfo: { gameId: string };
};

const Stack = createStackNavigator<RootStackParamList>();

export default function App() {
  const linking = {
    prefixes: ['https://myapp.com', 'myapp://'],
    config: {
      screens: {
        GameList: 'gamelist',
        GameInfo: 'gameinfo/:gameId',
      },
    },
  };

  return (
    <Provider store={store}>
      <NavigationContainer linking={linking} independent={true}>
        <Stack.Navigator initialRouteName="GameList">
          <Stack.Screen name="GameList" component={GameList} />
          <Stack.Screen name="GameInfo" component={GameInfo} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

依赖版本 #

"@react-navigation/native": "^6.1.18",
"@react-navigation/stack": "^6.4.1"

GameList.tsx 代码 #

export default function GameList() {
  const [page, setPage] = useState(1);
  const itemsPerPage = 10;
  const navigation: any = useNavigation();
  const { data, error, isLoading } = useGetGamesQuery({ page });

  const paginatedGames = data?.results?.slice((page - 1) * itemsPerPage, page * itemsPerPage);

  const handleNextPage = () => {
    if (paginatedGames && paginatedGames.length === itemsPerPage && data?.results && data.results.length > page * itemsPerPage) {
      setPage((prev) => prev + 1);
    }
  };

  const handlePreviousPage = () => {
    if (page > 1) {
      setPage((prev) => prev - 1);
    }
  };

  if (isLoading) {
    return (
      <View style={styles.activityIndicatorContainer}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    );
  }

  if (error) {
    return <Text>Error loading games</Text>;
  }

  return (
    <ScrollView>
      <View style={styles.container}>
        <View style={styles.paginationContainer}>
          <Pressable style={[styles.button, page === 1 && styles.disabledButton]} onPress={handlePreviousPage} disabled={page === 1}>
            <Text style={styles.buttonText}>Previous</Text>
          </Pressable>
          <Text style={styles.pageText}>Page {page}</Text>
          <Pressable style={[styles.button, (!paginatedGames || paginatedGames.length < itemsPerPage) && styles.disabledButton]} onPress={handleNextPage} disabled={!paginatedGames || paginatedGames.length < itemsPerPage}>
            <Text style={styles.buttonText}>Next</Text>
          </Pressable>
        </View>
        {paginatedGames?.map((game: Game) => (
          <View key={game.id} style={styles.gameContainer}>
            <Text style={styles.title}>{game.name}</Text>
            <Pressable onPress={() => navigation.navigate('GameInfo', { gameId: game.id })}>
              <Image source={{ uri: game.image.medium_url }} style={styles.image} />
            </Pressable>
          </View>
        ))}
      </View>
    </ScrollView>
  );
}

GameInfo.tsx 代码 #

type RootStackParamList = {
  GameInfo: { gameId: string };
};

type Props = {
  route: RouteProp<RootStackParamList, 'GameInfo'>;
};

export default function GameInfo({ route }: Props) {
  const { gameId } = route.params;
  const { data, error, isLoading } = useGetGamesQuery({ page: 1 });

  const game = data?.results.find((game: Game) => game.id === gameId);

  if (isLoading) {
    return (
      <View style={styles.activityIndicatorContainer}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    );
  }

  if (error || !game) {
    return <Text>Game not found</Text>;
  }

  return (
    <ScrollView>
      <View style={styles.container}>
        <Text style={styles.title}>{game.name}</Text>
        <Image source={{ uri: game.image.medium_url }} style={styles.image} />

        <Text style={styles.title}>Description</Text>
        <Text style={styles.description}>{game.deck}</Text>

        <Text style={styles.title}>Platforms</Text>
        <Text style={styles.platforms}>
          {game.platforms ? game.platforms.join(", ") : "Platforms not found"}
        </Text>

        <Text style={styles.title}>Release Date</Text>
        <Text style={styles.releaseDate}>{game.original_release_date}</Text>
      </View>
    </ScrollView>
  );
}

1. 移除 independent={true} 属性 #

independent={true} 会让 NavigationContainer 进入独立模式，此时导航器不会监听或处理URL变化，直接导致linking配置失效并触发警告。删除该属性即可：

<NavigationContainer linking={linking}>
  {/* ... 导航器内容 ... */}
</NavigationContainer>

2. 统一路由参数类型定义 #

GameInfo.tsx中重复定义了RootStackParamList，建议在单独文件（如navigation/types.ts）中统一导出该类型，避免类型不一致：

// navigation/types.ts
export type RootStackParamList = {
  GameList: undefined;
  GameInfo: { gameId: string };
};

之后在所有需要的文件中导入：

import type { RootStackParamList } from './navigation/types';

3. 验证链接配置规则 #

确保测试URL符合配置的前缀和路径规则：

• GameList对应URL：https://myapp.com/gamelist 或 myapp://gamelist
• GameInfo对应URL：https://myapp.com/gameinfo/123 或 myapp://gameinfo/123

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