TIL : useNavigate로 데이터 전달,useLocation로 받기

🌼

{listTitle.map(function (title, i) {         return (           <List             key={i}             onClick={() => {               navigate("/detail/${i}");             }}           >

 문자열 안에서 i를 넣기 위해 그냥 i 가 아닌 ${i} 사용

 

🌼 글 리스트 누르면 제목 전달하기

useNavigate 는 지정한 경로로 페이지를 이동시킬 수 있고, 두 번째 인자로 이동시킬 페이지에 함께 보낼 데이터를 지정할 수 있다.

{listTitle.map(function (title, i) {         return (           <List             key={i}             onClick={() => {               navigate(`/detail/${i}`, { state: { listTitle } });                           }}           >

 

데이터를 보낼 때는 state라는 속성으로 보내야 한다.

 

🌼 useLocation

useNavigate를 이용해 전송된 데이터를 받을 수 있다.

const{id}= useParams(); const location = useLocation(); const [listTitle,setListTitle] =useState(location.state?.listTitle);

이렇게 상태에 넣어줬다.

 

<ContentTitle>{listTitle[id]}</ContentTitle>

이렇게 하니 누르는 제목에 맞게 적용이 됐다~!!