리액트 props.history 가 없다...! (+ Form Submit 했을 때 페이지 이동 못하게하기)

리액트에서 페이지 이동을 할 때 기존에 props.history.push('/') 로 코드를 짜놨었는데 이동하려고 보니 오류가 난다.

 

Uncaught TypeError: Cannot read properties of undefined (reading 'push')

 

찾아보니 다른 방식으로 바뀐 것 같다!

페이지 이동 방법

---

새로고침 x

window.location.href = "주소";

 

새로고침 o

import React, {useState} from "react";
import { useNavigate } from "react-router-dom";

const NavTest = () => {
	const navigate = useNavigate();
    
	return (
    	<>
        	<button onClick={() => props.history.push('/')}>이동</button>
        </>
    )
}

export default NavTest;

 

Form Submit 데이터 넘어가고 페이지 이동 안하고 싶을 때

---

콘솔 찍어서 데이터가 잘 넘어가는지 확인하고 싶은데...

submit 버튼 누르면 페이지가 넘어가 버린다면?

 

import React, {useState} from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";

const NavTest = () => {
	const navigate = useNavigate();
    
    const Submit = async () => {
    	e.preventDefault();
        
        await axios.post('http://127.0.0.1:8000/board/add', {test: 'test'})
        .then(e => {
        	console.log(e);
        	navigate('/'); // 여기에 현재 주소 적으면 페이지 안넘어감
       	})
        .catch(err => console.log(err))
    }
    
	return (
    	<>
        	<form onSubmit={Submit}>
            	<input name="submit" />
                <input type="submit" value="submit" />
            </form>
        </>
    )
}

export default NavTest;