React의 Error Page와 관련된 고민

React에서 다음과 같이 Nested Router를 사용할 수 있다.

export const routers: RemixRouter = createBrowserRouter([
  {
    path: '/',
    element: <LayOutWrapper />,
    errorElement: <ErrorRedirect />,
    children: [
      {
        index: true,
        element: <MainPage />,
      },
      {
        path: 'image',
        element: <ImageUploadPage />,

여기서 ErrorRedirect 컴포넌트의 역할은 존재하지 않는 라우터로 진입을 시도했거나, 페이지에서 에러가 발생했을 때 Error Page로 리디렉션 하는 역할을 하도록 구현되어 있다.

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

export default function ErrorRedirect() {
  const navigate = useNavigate();
  useEffect(() => {
    navigate('/error');
  });

  return <div className="flex h-[100vh] w-[100vh] items-center justify-center">Error.....</div>;
}

그런데 여기서 한 가지 문제가 있다.

가령 존재하지 않는 라우터 /193782 로 접근을 시도했을 때

페이지는 0.000000001초라도 /193782 라우터를 거쳐서,

거기서 다시 404 Page로 리디렉션을 하게 되어있다.

그럼 /193782 라우터에 잠깐 들리는 그 소모를 줄일 수 있는 방법은 없을까?