如何隐藏react-router-dom中组件手动抛出错误的控制台日志

需要使用react-router-dom原生方法在组件中实现权限控制逻辑：当isLoggedIn为真时，展示「Page Not Found」错误页，但当前通过抛出404 Response错误的方式，会导致控制台打印React Router caught the following error during render的日志，希望保留错误页展示效果的同时隐藏该日志。

相关代码：
RoleAuthOutlet组件：

const RoleAuthOutlet: FC = () => {
    if (isLoggedIn)
        throw new Response('Not Found', { status: 404 })

    return <Outlet />
}

ErrorPage组件：

const ErrorPage: FC = () => {
    const error = useRouteError()

    let errorStatus: number | null = null

    if (isRouteErrorResponse(error) || error instanceof Response) {
        errorStatus = error.status
    }

    const errorMessage = errorStatus
        ? errorStatus === 404
            ? 'Page Not Found'
            : 'Something Went Wrong'
        : 'Something Went Wrong'

    return (
        <LinearGradientContainer flexDirection='column' style={{ gap: '20px' }}>
            <Title>{errorMessage}</Title>
        </LinearGradientContainer>
    )
}

不要通过抛出错误的方式触发错误页，改用react-router-dom的useNavigate导航到专门的404路由，同时在路由配置中映射该路由到ErrorPage组件，既满足需求又不会产生控制台错误日志。

步骤1：修改RoleAuthOutlet组件 #

引入useNavigate，替换抛错误逻辑为导航到404页面：

import { Outlet, useNavigate } from 'react-router-dom';

const RoleAuthOutlet: FC = () => {
  const navigate = useNavigate();

  if (isLoggedIn) {
    // 用replace模式避免在历史记录中留下冗余条目
    navigate('/404', { replace: true });
    return null; // 暂停组件渲染
  }

  return <Outlet />;
};

步骤2：配置404路由 #

在你的路由配置（比如createBrowserRouter）中添加404路由：

import { createBrowserRouter } from 'react-router-dom';
import ErrorPage from './path/to/ErrorPage';

const router = createBrowserRouter([
  // 你的其他路由配置...
  {
    path: '/404',
    element: <ErrorPage />,
  },
]);

可选：传递错误状态到ErrorPage #

如果需要ErrorPage仍能识别404状态，可以在导航时携带状态参数：

// RoleAuthOutlet中修改导航逻辑
navigate('/404', { 
  replace: true,
  state: { status: 404, message: 'Page Not Found' }
});

然后修改ErrorPage组件，通过useLocation获取状态：

import { useLocation } from 'react-router-dom';

const ErrorPage: FC = () => {
  const location = useLocation();
  const { status = null, message = 'Something Went Wrong' } = location.state || {};

  const errorMessage = status === 404 ? 'Page Not Found' : message;

  return (
    <LinearGradientContainer flexDirection='column' style={{ gap: '20px' }}>
      <Title>{errorMessage}</Title>
    </LinearGradientContainer>
  );
};

这样既保留了错误页的展示效果，又彻底避免了控制台的错误日志输出，完全使用react-router-dom原生API实现。

内容的提问来源于stack exchange，提问作者kennarddh