错误处理
了解使用 Expo Router 时如何处理应用中不匹配的路由和错误。
本指南指定了使用 Expo Router 时如何处理应用中不匹配的路由和错误。
未匹配的路由
原生应用没有服务器，因此从技术上讲不存在 404。 但是，如果你要实现通用路由，那么处理丢失的路由是有意义的。 这是针对每个应用自动补齐的，但你也可以对其进行自定义。
app/[...unmatched].js
import { Unmatched } from 'expo-router';
export default Unmatched;
这将渲染默认的 Unmatched。 你可以导出任何想要渲染的组件。 我们建议提供 / 的链接，以便用户可以导航回主屏幕。
错误处理
Expo Router 支持微调错误处理，以便在未来实现更加有态度的数据加载策略。
你可以从任何路由导出嵌套的 ErrorBoundary 组件，以使用 反应错误边界 拦截和格式化组件级错误：
app/home.tsx
import { View, Text } from 'react-native';
export function ErrorBoundary(props: ErrorBoundaryProps) {
return (
<View style={{ flex: 1, backgroundColor: "red" }}>
<Text>{props.error.message}</Text>
<Text onPress={props.retry}>Try Again?</Text>
</View>
);
}
export default function Page() { ... }
当你导出 ErrorBoundary 时，路由将被有效的 React Error Boundary 封装：
Virtual
function Route({ ErrorBoundary, Component }) {
return (
<Try catch={ErrorBoundary}>
<Component />
</Try>
);
}
当 ErrorBoundary 不存在时，错误将被抛出到最近的父级的 ErrorBoundary。
API
ErrorBoundaryProps
每个 ErrorBoundary 都传递以下属性：
- 错误：
Error—— 抛出的错误。 - 重试：
() => Promise<void>—— 将重新渲染路由组件的函数。
ErrorBoundary
你还可以使用默认的 ErrorBoundary 组件来实现快速 UI：
app/home.tsx
// Re-export the default UI
export { ErrorBoundary } from 'expo-router';
尚未完成的
React Native LogBox 需要不那么激进地呈现，以便开发时出现错误。 目前，它显示 console.error 和 console.warn。 然而，理想情况下它应该只显示未捕获的错误。