뒤로가기 버튼 만들기 + 네비게이트 navigte

Martin·2022년 12월 3일
0

react

목록 보기
3/4
post-custom-banner
import { Navbar } from "react-bootstrap";
/* 뒤로가기 */
import { useNavigate } from "react-router-dom";
import React from "react";
/* import HistorySample from '../../../HistorySample'; */

function Header() {
  //뒤로가기 구현
  const navigate = useNavigate();
  // 인덱스로 처리, 두번 뒤로 가고싶으면 -2
  const handleGoBack = () => {
    navigate(-1);
  };
  // 홈으로 가기
  //const handleGoHome = () => {navigate('/');}

  return (
    <>
      <Navbar variant="dark" className="header-container">
        <Navbar.Brand className="header-title-container">
          <div className="hisSampleButton">
            <button name="back" onClick={handleGoBack}>
              뒤로
            </button>
            {/* <button name="go" onClick={handleGoHome}>홈으로</button> */}
          </div>
          <h3> Greenee</h3>
        </Navbar.Brand>
      </Navbar>
    </>
  );
}

export default Header;

에서

import { useNavigate } from "react-router-dom";
import React from "react";
const navigate = useNavigate();
  const handleGoBack = () => {
    navigate(-1);
  };
<button name="back" onClick={handleGoBack}>
              뒤로
            </button>

이것만 있으면 ok
네비(/)에 홈버튼을 만들어서 홈으로도 가능

post-custom-banner

0개의 댓글