Обработка 404 и ошибок

<Routes>
    <Route path="/" element={<Home />} />
    <Route path="/posts" element={<Posts />} />
    <Route path="*" element={<NotFound />} />
</Routes>

function NotFound() {
    return (
        <div className="not-found">
            <h1>404</h1>
            <p>Страница не найдена</p>
            <Link to="/">На главную</Link>
        </div>
    );
}

<Route path="/posts" element={<PostsLayout />}>
    <Route index element={<PostsList />} />
    <Route path=":id" element={<PostDetail />} />
    <Route path="*" element={<NotFound />} />
</Route>

function PostDetail() {
    const { id } = useParams();
    const { data, isLoading, error } = useQuery({
        queryKey: ['post', id],
        queryFn: () => fetchPost(id!),
    });

    if (isLoading) return <Spinner />;
    if (error) return <ErrorState error={error} />;
    if (!data) return <NotFound />;

    return <Post post={data} />;
}

import { Component, ReactNode } from 'react';

class ErrorBoundary extends Component<
    { children: ReactNode; fallback: ReactNode },
    { hasError: boolean }
> {
    state = { hasError: false };

    static getDerivedStateFromError() {
        return { hasError: true };
    }

    componentDidCatch(error: Error, info: React.ErrorInfo) {
        console.error(error, info);
    }

    render() {
        if (this.state.hasError) return this.props.fallback;
        return this.props.children;
    }
}

<ErrorBoundary fallback={<ErrorPage />}>
    <App />
</ErrorBoundary>

const router = createBrowserRouter([
    {
        path: '/',
        element: <Root />,
        errorElement: <ErrorPage />,
        children: [
            { path: 'posts', element: <Posts /> },
        ],
    },
]);

import { useRouteError, isRouteErrorResponse } from 'react-router-dom';

function ErrorPage() {
    const error = useRouteError();

    if (isRouteErrorResponse(error)) {
        return (
            <>
                <h1>{error.status}</h1>
                <p>{error.statusText}</p>
            </>
        );
    }

    return <h1>Что-то пошло не так</h1>;
}

componentDidCatch(error: Error, info: React.ErrorInfo) {
    fetch('/api/log', {
        method: 'POST',
        body: JSON.stringify({ message: error.message, stack: info.componentStack }),
    });
}