AC 03/21 React 라우팅

NaviLink

아래 코드에서 classes.menu가 정확히 뭔지 이해가 안되었음
확장자명 module.css도 잘 모르겠다.
추가로 알아보기

MainNavigator.module.css

a{
    text-decoration: none;
    color: blue;
}

.menu{
    color: red;
    text-decoration: underline;
}

MainNavigator.js

import React from 'react';
import { NavLink } from 'react-router-dom';
import classes from './MainNavigator.module.css';

function MainNavigator(props) {
    console.log(classes.menu);
    return (
        <div>
            {/* <Link to="/">Home</Link><br/>
            <Link to="/products">products</Link><br/>
            <Link to="/products2">products2</Link><br/> */}

            <NavLink 
            to="/"
            className={({isActive})=>{
                return isActive?classes.menu:undefined;
            }}>Home</NavLink><br/>
            
            <NavLink 
            to="/products"
            className={({isActive})=>{
                return isActive?classes.menu:undefined;
            }}>Products</NavLink><br/>
        </div>
    );
}

export default MainNavigator;

useNavigate hook

useNavigate 훅을 이용해 어디서든 간편하게 특정 페이지로의 주소이동을 구현가능

1. navigate 임포트
2. navigate 생성
3. 주소 등록

	const navigate = useNavigate();
    function handlEvent(){
        navigate("/products");
    }

동적라우팅

get 요청에서 데이터 전달하는 방식
1. 기존 쿼리스트링 방식
2. PathVariable 방식

여기선 2번에 대해 다룬다.

1. 주소를 /주소/데이터 형식으로 요청 (pathvariable 형식)
2. 매핑 {path: '/products/:productId', element: <ProductDetailPage />}
3. useParams hook으로 전달된 파라미터 값을 얻는다.

useParams()를 이용해 값을 반환받으면 key:value 형식의 파라미터들이 json객체에 담겨서 반환된다.
아래와 같이 사용한다.
const params = useParams() -> console.log(params.키값);

상대경로

route는 현재 주소가 하나의 값으로 설정되어서 상위경로로 가면 /가 된다.
따로 적지 않을시 기본값은 route로 설정된다.

동적라우팅 - 쿼리스트링 방식

프로젝트 다시 보기

    const [params] = useSearchParams();
    const prod_id = params.get("prod_id");
    console.log(prod_id);
    return (
        <div>
            {prod_id}
        </div>
    );

loader

로더는 페이지 로딩시에 최초 한번 실행되는 함수다.
로더 설정

      {path: '/users', element: <UsersPage />, 
        loader: async function(){
          console.log("loader>>>>");
          const response = await fetch("https://reqres.in/api/users?page=2");
          const resData = await response.json();
          return resData.data;
        }

로더의 반환값 사용
const events = useLoaderData();
자식에서 사용가능
자손에서도 사용가능

여러개의 로더가 사용될 때 id지정과 값을 선택해서 사용하는 방법

1. 로더에 id를 지정하여 선택할 수 있게한다.

	id: "root",
    loader: async function () {

2. 원하는 로더의 id를 선택
   useLoaderData로는 특정 로더의 값을 선택하지 못한다.
   useRouteLoaderData를 사용
   const events = useRouteLoaderData("root");

선택 여부와 상관없이 로더는 실행된다.

로더를 파일로 분리하여 구현

useNavigation

import MainNavigator from '../components/MainNavigator';
import { Outlet, useNavigation } from 'react-router-dom';


function Root(props) {
    const navigation = useNavigation();
    return (
        <div>
            <MainNavigator></MainNavigator>
            <hr/>
            {navigation.state === "loading" && <p>Loading...</p>}
            {/* {navigation.state === "loading" && alert()} */}
            <Outlet></Outlet>
        </div>
    );
}

export default Root;

loader함수 예외처리

에러페이지에서 에러 받는 방식이 useRouterError hook을 이용하여 발생된 예외를 catch 한다.

import { json } from 'react-router-dom';
다른 json 사용

에러발생 로더 함수

export async function loader(){
 try {
  console.log("Users.loader 실행 >>>>>");
  const response = await fetch("https://reqres-error.in/api/users?page=2");
  //예외처리 코드
  console.log(">>>", response.ok);
  const resData = await response.json();
  return resData.data;
 } catch (error) {
  console.log("catch error " , error);
  throw json({message: "Could not fetch users", status: 500}); //import
  //Error.js 수정 useRouterError()로 사용됨
 }
}

에러페이지

import React from 'react';
import { Outlet, useRouteError } from 'react-router-dom';
import MainNavigator from '../components/MainNavigator';

function Error(props) {
    const error = useRouteError();
    console.log("에러객체확인: ", error);
    console.log(error.data.message, error.data.status);

    let title = "An error occurred!!";
    let message = "Something went wrong!!";
    if(error.data.status === 500){
        message = error.data.message;
    }
    if(error.data.status ===404){
        title= "Not Found!";
        message = "Could not find resource or page";
    }
    return (
        <div>
            <MainNavigator></MainNavigator>
            <hr/>
            <div>
                <h1>{title}</h1>
                <p>{message}</p>
            </div>
        </div>
    );
}

export default Error;