React路由异常跳转求助：点击缩略图误跳至Profile页面

Hey there! Let's break down what's causing your routing headache—when you click a video thumbnail on the Home page, you end up needing to hit back to land on the Video page, with the stack showing Home → Video → Profile instead of just Home → Video. This is almost always tied to either an accidental navigation trigger in your components or a misconfigured route structure.

1. Accidental Navigation in the Video Screen #

The most likely culprit here is a stray navigation call in your VideoScreen component that fires as soon as the page loads. For example, a misplaced useEffect hook or a callback that accidentally redirects to Profile:

// ❌ Example of unintended navigation in VideoScreen
import { useEffect } from 'react';
import { useNavigation } from '@react-navigation/native'; // or your routing library

const VideoScreen = () => {
  const navigation = useNavigation();

  useEffect(() => {
    // Oops! This navigates to Profile right when Video loads
    navigation.navigate('Profile');
  }, [navigation]);

  return (
    // Your video screen content here
  );
};

This creates the flow: Home → navigate to Video → Video loads and immediately jumps to Profile. The stack ends up as Home → Video → Profile, so hitting back takes you from Profile to the Video page you originally wanted.

Fix: Double-check your VideoScreen code for any unintended navigation calls, especially in useEffect hooks or component mount logic. Remove that accidental navigate('Profile') line.

2. Misconfigured Route Nesting #

If your Main stack has Video nested under Profile (even if you didn't intend it), navigating to Video will automatically add the parent Profile screen to the stack first. For example:

// ❌ Wrong: Video nested under Profile
<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Profile" component={ProfileScreen}>
    <Stack.Screen name="Video" component={VideoScreen} />
  </Stack.Screen>
</Stack.Navigator>

In this setup, navigating to Video loads Profile first (adding it to the stack), then loads Video on top. While this would create a Home → Profile → Video stack, if you have additional logic that navigates back to Profile from Video, it could result in the stack you're seeing.

Fix: Move Video to be a sibling route of Profile and Home in your Main stack configuration:

// ✅ Correct: Video as a top-level route
<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Profile" component={ProfileScreen} />
  <Stack.Screen name="Video" component={VideoScreen} />
</Stack.Navigator>

3. Check for Route Guard/Redirect Logic #

If you have global route guards (like authentication checks) in your Main stack, a misconfigured guard might be redirecting you to Profile when you try to access Video, then re-routing you to Video once the guard finishes—leaving both screens in the stack. For example, a loading state that temporarily shows Profile before loading user data and switching to Video.

Fix: Audit your route guard code to ensure it doesn't create unintended redirects that add extra screens to the stack.

Next Steps #

If none of these fixes resolve the issue, sharing your actual Main stack router.js code would help pinpoint the problem exactly. But based on your description, the accidental navigation in the Video screen is the most probable fix.

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