React Native使用@react-navigation/native的useRoute钩子出现Component Exception异常

报错原因 #

这个报错的本质是useRoute()只能在React Navigation导航器内部的路由树组件中调用，你的NavBar组件当前没有被导航器定义的Screen组件及其后代包裹，无法获取到导航上下文，所以触发了报错。

解决方案 #

方案1：将NavBar放到各个页面组件内部引用 #

在你的Home、Catalog、Adm等Screen页面组件的渲染逻辑中，引入并使用NavBar组件，此时NavBar作为Screen的子组件，天然可以访问导航上下文，useRoute()就可以正常调用。

方案2：通过导航器的header配置全局挂载NavBar #

如果你希望所有页面统一复用NavBar，不需要每个页面单独引用，可以直接在导航器的screenOptions中配置自定义header为你的NavBar组件，导航器会自动给header组件注入导航上下文：

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import NavBar from './NavBar';
import Home from './Home';
import Catalog from './Catalog';
import Adm from './Adm';

const Stack = createNativeStackNavigator();

const AppStack = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        header: () => <NavBar />
      }}
    >
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Catalog" component={Catalog} />
      <Stack.Screen name="Adm" component={Adm} />
    </Stack.Navigator>
  )
}

方案3：使用布局组件包裹页面内容 #

如果你不想使用导航器自带的header插槽，可以封装一个公共布局组件，将NavBar和页面内容插槽组合，在每个页面组件中用该布局包裹内容即可：

// 公共布局组件 Layout.js
import NavBar from './NavBar';

const Layout = ({ children }) => {
  return (
    <>
      <NavBar />
      {children}
    </>
  )
}

// 页面组件中使用
const Home = () => {
  return (
    <Layout>
      {/* 页面内容 */}
    </Layout>
  )
}

临时兼容方案 #

如果确实有场景需要在导航上下文外使用NavBar，可以将代码中的route.name修改为route?.name，避免取值报错，但该方案下路由状态不会自动更新，不适合导航高亮的需求，仅作临时兼容使用。

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