如何在Expo Router中跳转至无底部导航页面并实现正确返回

你的问题根源在于：点击底部创建动态按钮时，会先加载tabs目录下的空create-feed页面，再跳转到root目录的实际发布页面，导致路由栈中多了一层无意义的空页面，所以返回时会先回到这个空页，而非用户的来源页面。

下面是两种可行的解决方法：

方法一：重定向并替换路由（推荐） #

1. 修改tabs下的create-feed页面 #

让该页面进入时立即重定向到实际发布页，并用replace方法移除自身在路由栈中的记录：

import { useEffect } from 'react';
import { useRouter } from 'expo-router';
import { Stack } from "expo-router";

export const Layout = () => {
  return <Stack screenOptions={{ headerBackVisible: false }} />;
};

export default function Page() {
  const router = useRouter();
  
  useEffect(() => {
    // 替换当前路由，将空页从栈中清除
    router.replace('/(root)/create-feed/1');
  }, []);
  
  return null;
}

2. 更新底部导航栏配置 #

移除href属性，避免重复跳转：

<Tabs.Screen
  name="create-feed"
  options={{
    tabBarIcon: ({ focused }) => focused ? <CreateFeedActive /> : <CreateFeedInactive />
  }}
/>

修改后，路由栈会变成「用户来源页 → root/create-feed」，点击返回按钮直接回到来源页。

方法二：自定义按钮跳转逻辑 #

直接控制底部按钮的点击行为，绕过tabs的占位页：

import { useRouter } from 'expo-router';
import { TouchableOpacity } from 'react-native';

// 在导航组件内获取router实例
const router = useRouter();

<Tabs.Screen
  name="create-feed"
  options={{
    tabBarButton: (props) => (
      <TouchableOpacity
        {...props}
        onPress={() => {
          // 直接跳转到发布页，不触发默认tab切换
          router.push('/(root)/create-feed/1');
        }}
      >
        {props.children}
      </TouchableOpacity>
    ),
    tabBarIcon: ({ focused }) => focused ? <CreateFeedActive /> : <CreateFeedInactive />
  }}
/>

这种方式下，点击按钮直接将发布页推入路由栈，返回时直接回到来源页，你也可以直接删除tabs下的空create-feed页面。

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