페이지 이동시 state를 동반하여 이동하기 (feat. useNavigate와 useLocation)

프롤로그

React-router-dom의 Link 를 사용하면 페이지 이동이 가능하다.

페이지 이동과 더불어 state를 함꼐 전달하고 싶을 때가 있다면 useNavigate를 이용하자.

 

아래의 버튼 클릭시

1. 자세히 보기 버튼을 클릭시 /service 페이지로 이동하게 된다.

2. state를 전달한다.

   import { Link, useNavigate } from 'react-router-dom';
   const Section1 = () => {
	  const navigate = useNavigate();
        return(
        	<button onClick={() => navigate('/service', {state: {selector: '#service-section1.section1', tabIndex : 1},})}>
                <span>
                    자세히 보기
                </span>
            </button>
           )
    }
    export default Section1

 

state를 받아오고 싶다면 useLocation을 사용해서 아래와 같이 state 값을 불러와서 사용할 수도 있다.

import { useLocation } from 'react-router-dom';
type Ipath = {
  selector : string,
  tabIndex : number
}

const TabUnderline = () => {
    let path = useLocation().state as Ipath;
	return(
    	useEffect(() => {
          if(path){
            setCurrentTab(path.tabIndex);
            scrollMove(path.selector);
          }
        }, [path]);
    )
}
export default TabUnderline