React 페이지 이동 Snack bar

React에서 페이지 이동이 가능한 스넥바의 동작을 위하여
sanckBar.js hook을 생성 후 아래와 같은 내용을 넣어준다.

import React from 'react';
import { useSnackbar } from "notistack";
import Button from "@mui/material/Button";
import {useNavigate} from "react-router-dom";

const snackBar = () => {
    const { enqueueSnackbar, closeSnackbar } = useSnackbar();
    const nav = useNavigate();

    const showSnackbar = (e) => {
        const action = () => {
            return (
                <Button className="snack-btn" onClick={() => {closeSnackbar(); nav(e.navi);}}>{e.btnName}</Button>
            )
        }
        if(e.useBtn === true){
            enqueueSnackbar(e.msg, { autoHideDuration: 3000, anchorOrigin: {vertical: 'bottom', horizontal: 'center'}, action,})
        } else {
            enqueueSnackbar(e.msg, { autoHideDuration: 3000, anchorOrigin: {vertical: 'bottom', horizontal: 'center'},})
        }
    }

    return {
        showSnackbar,
    };
}

export default snackBar;

 

그 후 컴포넌트에서 snackbar를 선언 후 ref로 선언된 항목에서 스낵바에 표시 및 동작시킬 항목을 전달하여 사용할 수 있다.

const {
    showSnackbar,
} = Snackbar(SnackbarElement);

 

showSnackbar({msg: '장바구니에 상품이 담겼습니다.', btnName: '장바구니로 가기', navi: '/cart', useBtn: true});

 

ref={SnackbarElement}