useNavigate3 페이지 이동 Hook useNavigate, useParams, useSearchParams 페이지 이동 Hook useNavigate, useParams, useSearchParams useNavigate : 다른 페이지로 이동, 뒤로 가기 시 사용하는 hook. import axios from "axios"; import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; const InfoProductSoldOutPage = () => { ... const navigate = useNavigate(); return ( ... navigate("/listSoldOut")} > 돌아가기 ); }; export default InfoProductSoldOutPage; useParam.. 2022. 12. 2. [React] 버튼 클릭 이벤트 새로운 페이지로 이동하기 (button click to new page) 새로운 페이지 만들기 src/pages/PurchasePage.js import React from "react"; const PurchasePage = () => { return PurchasePage; }; export default PurchasePage; useNavigate() 사용하기 참고 : 2022.07.20 - [javascript/React] - [React] React app - 시작 로고 페이지 만들기 (useNavigate, setTimeout()) navigateToPurchase 에서 navigate 함수를 호출해 주소를 전달한다. navigate 함수에 인자로 주소를 넣어준다. src/pages/ListProductsSalePage.js const navigate = useN.. 2022. 9. 6. [React] React app - 시작 로고 페이지 만들기 (useNavigate, setTimeout()) 앱 실행 시 로고 페이지가 몇 초 띄워진 후 다음 페이지로 넘어가도록 하는 시작 로고 페이지 만들기 useNavigate useNavigate hook 은 양식을 제출한 후 navigate 할 수 있는 함수를 반환. 사용법 import { useNavigate } from "react-router-dom"; function SignupForm() { let navigate = useNavigate(); async function handleSubmit(event) { event.preventDefault(); await submitForm(event.target); navigate("../success", { replace: true }); } return {/* ... */}; } navigate 함수.. 2022. 7. 20. 이전 1 다음
