[React] react-router-dom v6 Navigate

페이지를 이동할 때 props를 가지고 이동하고 싶을 때가 있다. 

 

이 때 react-router-dom v6의 Nevigate를 사용하면 된다. 

  const [clicked, setClicked] = useState(false)
    const state = {user: 'lee', error: null}

    const handleClicked = () => {
        setClicked(true)
    }
    return (
        <Container>
            <div
                onClick={() => {
                    handleClicked()
                }}
            >
                {' '}
                블로그
            </div>
            {clicked && <Navigate to="/works" replace={true} state={state} />}
        </Container>
    )
}

export default BlogSection

위와 같이 state 안에 props를 담아서 라우팅을 할 수 있다. 

 

const {state} = useLocation()

이후 해당 페이지에서 useLocation을 사용해 state 값을 추출하여 사용하면 된다.