노마드 마스터클래스 강의 중
createBrowserRouter errorElement
를 복습하면서 정리한 내용입니다.
이전 포스트에 이어,
createBrowserRouter
배열에 추가한 오브젝트의 errorElement
속성에 <NotFound />
컴포넌트를 추가한다. errorElement
는 하위에 path
속성이 맞는게 없을 때 출력된다.
// Router.tsx
import { createBrowserRouter } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
import App from './App';
import NotFound from './pages/NotFound';
const router = createBrowserRouter([
{
path: '/',
element: <App />,
children: [
{
path: '',
element: <Home />,
},
{
path: 'about',
element: <About />,
},
],
errorElement: <NotFound />,
},
]);
export default router;
http://localhost:3000/abc
로 접근했을 때, errorElement
속성이 있으면 아래 이미지처럼 NotFound 페이지를 보여줄 수 있다. 위 이미지는 develop 모드라서 보이는 에러 화면이고 사용자는 빈페이지를 보게 된다.
createBrowserRouter에 nesting된 하위 컴포넌트에서 에러가 났을 경우, 해당 컴포넌트에서 에러가 버블링 되지 않도록 막아주는 역할을 한다.
// Router.tsx
import { createBrowserRouter } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
import App from './App';
import NotFound from './pages/NotFound';
import ErrorComponent from './Components/ErrorComponent';
const router = createBrowserRouter([
{
path: '/',
element: <App />,
children: [
{
path: '',
element: <Home />,
},
{
path: 'about',
element: <About />,
errorElement: <ErrorComponent />,
},
],
errorElement: <NotFound />,
},
]);
export default router;
고의로 About 컴포넌트에서 에러가 났을 때, errorElement
속성이 없으면 위 이미지처럼 에러가 버블링되어 /
루트 경로의 NotFound 페이지가 보여진다.
아래는 http://localhost:3000/about
접속했을 때 에러가 난 About 컴포넌트 대신, 그 자리에 <ErrorComponent />
를 출력한다.