Expo Tab导航中router.back()未返回上页却跳转至首个Tab问题

云上老周

2026-7-10

Expo Router Tab导航中router.back()返回异常问题解决

问题描述

在_layout.tsx中配置了多路由的Tab导航器，通过router.push("foo")跳转到表单页面后，调用router.back()没有返回跳转前的Tab页面，而是直接跳转到Tab栏的首个Tab。使用的路由工具为import { router } from "expo-router";，已尝试useNavigation和useRouter相关方法未解决。

解决方法

1. 将表单页面设为当前Tab的子路由

如果表单页属于当前Tab的业务流程，把它配置为当前Tab的子路由（比如当前Tab路由是/tabs/profile，表单页路径设为/tabs/profile/foo），跳转时指定完整的子路由路径：

// 在Tab页面内跳转
router.push("/tabs/profile/foo");

这样表单页会被加入当前Tab的路由栈，提交后调用router.back()就能回到之前的Tab页面。

2. 使用Tab导航器实例进行跳转

通过useNavigation获取当前Tab的导航器实例，用navigate和goBack操作，确保路由操作在当前Tab栈内进行：

import { useNavigation } from "@react-navigation/native";

// 在Tab页面组件内
const navigation = useNavigation();

// 跳转到表单页
const handleGoToForm = () => {
  navigation.navigate("foo"); // "foo"需是当前Tab导航配置内的路由名
};

// 表单提交后返回
const handleSubmit = () => {
  // 表单提交逻辑...
  navigation.goBack();
};

3. 手动记录并返回原路由

跳转前记录当前页面的路由信息，提交后手动跳转回原路由：

import { router } from "expo-router";

// 跳转至表单页时
const handleGoToForm = () => {
  const prevRoute = router.getCurrentRoute()?.name;
  router.push({
    pathname: "foo",
    params: { prevRoute }
  });
};

// 表单提交后返回
const handleSubmit = () => {
  // 表单提交逻辑...
  const { prevRoute } = router.useParams();
  router.push(prevRoute || "/tabs/first-tab"); // 兜底到首个Tab
};