错误处理

学习如何在使用 Expo Router 时处理未匹配的路由和错误。

本指南指定了在使用 Expo Router 时如何处理未匹配的路由和错误。

未匹配的路由

原生应用没有服务器，因此技术上没有 404。然而，如果你在全局实现路由，处理缺失的路由是有意义的。这对每个应用程序都是自动完成的，但你也可以自定义它。

import { Unmatched } from 'expo-router';
export default Unmatched;

这将呈现默认的 Unmatched。你可以导出希望呈现的任何组件。我们建议添加一个指向 / 的链接，以便用户可以导航回主页。

路由优先级

在 Web 上，文件按以下顺序提供服务：

1. public 目录中的静态文件。
2. 应用目录中的标准和动态路由。
3. API 路由 在应用目录中。
4. 未找到的路由将最后提供，并返回 404 状态码。

错误处理

Expo Router 启用精细化的错误处理，以便在未来实现更具主观的数据加载策略。

你可以从任何路由导出嵌套的 ErrorBoundary 组件，以使用 React 错误边界 拦截和格式化组件级别的错误：

import { View, Text } from 'react-native';
import { type ErrorBoundaryProps } from 'expo-router';

export function ErrorBoundary({ error, retry }: ErrorBoundaryProps) {
  return (
    <View style={{ flex: 1, backgroundColor: "red" }}>
      <Text>{error.message}</Text>
      <Text onPress={retry}>Try Again?</Text>
    </View>
  );
}

export default function Page() { ... }

当你导出一个 ErrorBoundary 时，路由将有效地被一个 React 错误边界包裹：

function Route({ ErrorBoundary, Component }) {
  return (
    <Try catch={ErrorBoundary}>
      <Component />
    </Try>
  );
}

当 ErrorBoundary 不存在时，错误将被抛到最近父级的 ErrorBoundary，并接受 error 和 retry 属性。

进行中的工作

React Native LogBox 需要以较少的侵略性呈现，以便在开发时处理错误。目前，它会对 console.error 和 console.warn 显示。然而，理想情况下，它应该只对于未捕获的错误显示。