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
네비(/)에 홈버튼을 만들어서 홈으로도 가능