React_Error별 메세지 출력

 

import MainNavigation from "../components/MainNavigation"

import { useRouteError } from "react-router-dom"        //추가

export default function Error(){

    const error = useRouteError();

    console.log("error: ", error)

    console.log("error: ", error.data.status)

    console.log("error: ", error.data.message)

    let title = "An error occurred!!";

    let message = "Something went wrong!!"

    if(error.data.status === 500){

        message = error.data.message

    }

    if(error.data.status === 500){

        title = "Not Found!!";

        message = "Could not find resource or page!!"

    }

    return(

        <>

            <MainNavigation></MainNavigation>

            <hr></hr>

            <h1>Error페이지</h1>

            {title} <br></br>

            {message}

        </>

    )

}

 

import UserList from "../components/UserList";

import { json } from "react-router-dom";

export default function Users(){

    return(

        <>

            <h2>Users</h2>

            <UserList></UserList>

        </>

    )

}

export async function loader(){

    try {

        console.log("Users.loader 사용");

        const response = await fetch("https:/reqres.in/api/users?page=2");

        const resData = await response.json();

        return resData.data;

    } catch (error) {

        console.log("catch error", error);

        throw json({ message: "Could not fetch users", status: 500});

        //Error.js 수정 useRouterError()로 사용

    }

}