面试题：React错误边界在路由中的中等应用问题

创建错误边界组件：
- 错误边界是一个React组件，它可以捕获其子组件树中任何位置抛出的JavaScript错误，并记录这些错误，同时展示一个备用UI，而不是让整个应用崩溃。
- 下面是一个简单的错误边界组件示例：

import React, { Component } from'react';

class ErrorBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hasError: false
        };
    }

    componentDidCatch(error, errorInfo) {
        // 记录错误，例如发送到日志服务器
        console.log('捕获到错误:', error, errorInfo);
        this.setState({ hasError: true });
    }

    render() {
        if (this.state.hasError) {
            // 友好提示
            return <div>很抱歉，发生了一个错误。</div>;
        }
        return this.props.children;
    }
}

export default ErrorBoundary;

在路由组件中使用错误边界：
- 假设你有一个使用React Router的路由配置，例如：

import React from'react';
import { BrowserRouter as Router, Routes, Route } from'react-router-dom';
import ErrorBoundary from './ErrorBoundary';
import SomeRouteComponent from './SomeRouteComponent';

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={
                    <ErrorBoundary>
                        <SomeRouteComponent />
                    </ErrorBoundary>
                } />
            </Routes>
        </Router>
    );
}

export default App;

在上述代码中，ErrorBoundary组件包裹了SomeRouteComponent，这样如果SomeRouteComponent及其子组件抛出错误，ErrorBoundary的componentDidCatch方法会捕获错误，并显示友好提示。关键在于ErrorBoundary组件的创建和在路由配置中对可能出错的路由组件进行包裹。

星途面试题库

面试题：React错误边界在路由中的中等应用问题

知识考点

面试题答案