报错：挂载Root Layout前尝试导航，自动跳转标签页导航异常

场景与代码 #

希望应用以标签页导航为主，文件层级结构如下：

• app 根目录
  • _layout.js
  • index.js
  • (tabs) 文件夹
    • _layout.js
    • stock.js（对应Stock标签页）
    • home.js（对应Home标签页）
    • news.js（对应News标签页）

相关文件代码：

app/_layout.js #

const RootLayout = () => {
  return (
    <Stack>
      <Stack.Screen
        name="(tabs)"
        options={{
          headerTitle: "",
          headerShadowVisible: false,
        }}
      />
    </Stack>
  );
}

app/index.js #

export default function Root() {
  return <Redirect href="/home" />;
}

app/(tabs)/_layout.js #

export default () => {
  return (
    <Tabs>
      <Tabs.Screen
        name="stock"
        options={{
          headerShown: false,
          tabBarLabel: "Stock",
        }}
      />
      <Tabs.Screen
        name="home"
        options={{
          headerShown: false,
          tabBarLabel: "Home",
        }}
      />
      <Tabs.Screen
        name="news"
        options={{
          headerShown: false,
          tabBarLabel: "News",
        }}
      />
    </Tabs>
  );
};

问题描述 #

使用<Redirect href="/home"/>实现根路由自动跳转到Home标签页时，触发错误：

Error: Attempted to navigate before mounting the Root Layout component.

改用<Link>组件可正常跳转，但需求是无需用户点击的自动跳转效果。

解决方案 #

方案1：使用useRouter + useEffect延迟导航 #

修改app/index.js，利用useEffect在组件挂载后执行导航操作，确保路由系统已就绪：

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

export default function Root() {
  const router = useRouter();

  useEffect(() => {
    // 使用replace避免回退栈中保留根路由
    router.replace('/home');
  }, []);

  // 可返回加载占位组件，比如<ActivityIndicator />
  return null;
}

原因：<Redirect>会在组件渲染时立即触发导航，此时Root Layout尚未完成挂载，路由系统未初始化完成。而useEffect的回调会在组件挂载后执行，此时导航时机完全合法。

方案2：修改标签页布局的初始路由 #

如果希望直接进入标签页容器并默认选中Home标签，可调整两个文件：

1. 修改app/(tabs)/_layout.js，给Tabs组件添加initialRouteName属性：

import { Tabs } from 'expo-router';

export default () => {
  return (
    <Tabs initialRouteName="home">
      <Tabs.Screen
        name="stock"
        options={{
          headerShown: false,
          tabBarLabel: "Stock",
        }}
      />
      <Tabs.Screen
        name="home"
        options={{
          headerShown: false,
          tabBarLabel: "Home",
        }}
      />
      <Tabs.Screen
        name="news"
        options={{
          headerShown: false,
          tabBarLabel: "News",
        }}
      />
    </Tabs>
  );
};

2. 修改app/index.js的重定向目标为标签页容器：

import { Redirect } from 'expo-router';

export default function Root() {
  return <Redirect href="/(tabs)" />;
}

原理：设置initialRouteName="home"后，进入标签页容器时会自动激活Home标签页，同时重定向到/(tabs)的时机更安全，不会触发根布局未挂载的错误。

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