<aside> 💡 어떠한 버튼클릭과 같은 이벤트가 일어난 후에 리다이렉트 하는 방법에 대해 정리하자

</aside>

한 도메인 안에서 리 다이렉트 하기

window.location.href = './main';
//href
//속성 
//새로운 페이지로 이동
window.location.replace('./main')
//replace
//메서드
//기존페이지를 새로운 페이지로 변경시킨다.

//일반적인 페이지 이동에서는 href가 맞는 것 같다.
//하지만 이런 방식으로 하게 되면, 기존에 있던 상태값들이 초기화 될 우려가 있다. 

//그러므로,
//react-router-dom의 useHistory를 쓰자. 
//쓰는 방식은 아래와 같다. 
import {useHistory} from 'react';

const history = useHistory();

const clickHandler = () ={
let path = '/main';
history.push(path)
}
//만약 페이지 변경 하면서 props도 전달 하고 싶다면 아래와 같이 하면된다. 
//보내줄때
export default function PostCard({ post, pages }) {
    const history = useHistory();
    const detailHandler = () => {
        let path = `/log/mydetail/${post.id}`;
        history.push({ pathname: path, state: { pages: pages } });
        // document.location.href = `/log/mydetail/${post.id}`;
    };

//받아올때
import { useLocation } from 'react-router';
import classes from './MyLogDetail.module.css';
import axios from 'axios';
import EditLog from '../log/EditLog';

const ENDPOINT = process.env.REACT_APP_ENDPOINT;

const LogDetail = () => {
    const location = useLocation();
    const pages = location.state.pages;

**참고로, document.location.href()같은 경우도 거의 유사하게 작동하지만, window.location.href를 이용하는것이 낫다고 한다. 왜인지는 알게 되면 첨부하자. (https://stackoverflow.com/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location)

다른 주소로 리 다이렉트 시킬때(구글 OAuth, 페북 OAuth)

const FB_URL = `https://www.facebook.com/v11.0/dialog/oauth?client_id=${FACEBOOK_ID}&redirect_uri=https://api.m0ment.be/users/facebook&scope=email,public_profile`;
	const Google_URL = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${GOOGLE_CLIENT_ID}&response_type=code&scope=openid email&redirect_uri=https://api.m0ment.be/users/google`;
	const facebookHandler = () => {
		window.location.assign(FB_URL);
	};
	const googleHandler = () => {
		window.location.assign(Google_URL);
	};