[React] - errorElement

react-router-dom version 6에서 라우팅 에러를 처리하는 방법에 대해 알아보자.

리액트 라우터6에서는 route들이 errorElement를 가질 수 있게 되었다. errorElement는 우리의 컴포넌트에 에러가 발생해서 충돌하거나 컴포넌트의 위치를 찾지 못할 때 사용할 수 있는 도구이다.

NotFound.tsx

function NotFound(){
 	return <h1>404 Not Found</h1> 
}

export default NotFound

Router.tsx

const router = createBrowserRouter(
  {
  	path: '/',
    element: <Root />,
    children: [
    	{
    		path: '',
    		element: <Home />,
  		},
  		{
        	path: 'about',
          	element: <About />,
        },
  	],
  	errorElement: <NotFound />
  },
);
export default router;

=> 아무 자식도 발견되지 않았을 때 errorElement가 실행된다.

이외에도 컴포넌트가 충돌할 때 작동하는 errorElement도 있다.

ErrorComponent.tsx

function ErrorComponent() {
  return <h1>This component crashed</h1>;
}
export default ErrorComponent;

Router.tsx

// Home 컴포넌트에서 충돌이 일어났다고 가정
const router = createBrowserRouter(
  {
  	path: '/',
    element: <Root />,
    children: [
    	{
    		path: '',
    		element: <Home />,
    		errorElement: <ErrorComponet />,
  		},
  		{
        	path: 'about',
          	element: <About />,
        },
  	],
  	errorElement: <NotFound />
  },
);
export default router;