如果加载资源时出现错误,我尝试在同一页面上显示错误消息。但是,当使用 loader 和 errorElement 时,用户会被带到另一个页面。我怎样才能做到这一点,以便在我的组件上显示错误而不将用户重定向到新的组件/视图?
我正在做的事情的例子:
const router = createBrowserRouter([
{
path: "/",
element: <Root />,
errorElement: <ErrorPage />,
loader: rootLoader,
children: [
{
path: "contacts/:contactId",
element: <Contact />,
},
],
},
]);
Run Code Online (Sandbox Code Playgroud)
我已经尝试了几件事。
当我执行示例中的操作时,用户将被重定向到 errorComponent。如果应用程序出现致命错误,那就没问题,但如果应用程序出现 422 错误,那就不行了。在这种情况下,我希望出现错误警报/小吃。
我还尝试使用相同的组件来解决该错误。这没有加载我正在寻找的错误消息。