useNavigate() & useLocation()

에러 사항 발생

1. signupNext 에서 회원가입이 완료되기 때문에 signup 페이지에서 넘어갈때 id, email, pw 정보를 가지고 가야한다. 근데 <Link>로는 데이터가 전송이 되지 않았다. 그래서 컴포넌트, 라우터 간 데이터 통신을 알아보았다.

   // 발신
   <Link to={{
   		pathname:'url',
   		state: {
   			...data
   		}
   }}></Link>
   
   // 수신
   function susin({location}) {
   	//location으로 하면 받을수 있다고 적혀있는데 undefined만 계속 뜸
   }
   

해결방법

• useNavigate( ) & useLocation( ) 적용

  // signup.js
  import {useNavigate} from 'react-router-dom';
  
  function Signup() {
  	const navigate = useNavigate()
  	const onNext = () => {
      navigate('/signup/next', {
        state: {  // 전송할 데이터를 담아줍시다.
          id,
          password
        },
      });
    }
  }
  
  // SignupNext.js
  import { useLocation } from 'react-router-dom';
  
  function SignupNext() {
  	// location.state에 전송된 데이터 저장됨.
    const {state} = useLocation()
    const {id, email, password} = state
  }
  // hash: ""
  // key: "cpgnwpnn"
  // pathname: "/signup/next"
  // search: ""
  // state: {id: 'qres3403', password: 'qres3403'} 이렇게 날라옵니다.
  

하위컴포넌트에서 상위컴포넌트로 데이터 전송($emit)

1. 상위컴포넌트에서 함수를 props 해준다.

   // Signup.js
   const isRight = (isSame) => {
       console.log(isSame)
   }
   return (
   	<Email 
   		// 함수를 prop 해준다!
   		propFunction={isRight}
   	></Email>
   )
   

2. 하위컴포넌트에서 함수로 데이터를 전송해준다.

   // Email.js
   function OverLap({url, value, propFunction}) {
   	const overLap = () => {
   			...
   			// 전송할 데이터를 담아준다
   	    propFunction(false)
   	}
   }