TIL 60. React - Link에 데이터 넘겨주기

// main.jsx

<Link to={'/detail'}>
	디테일 페이지로!
</Link>

// Router.jsx

<Route path="/detail/:id" element={<Detail />} />

위 코드처럼 Link를 사용하면 to 안에 들어간 주소의 페이지를 띄운다.
detail 페이지에 정보들을 넘겨주고 싶다면 아래처럼 사용하면 된다.

// main.jsx

<Link 
  	to={'/detail'}
  	state={{
		id: 1
		title: '제목!!'
		name: 'kim'
		content: '내용!!'
	}}
>
	디테일 페이지로!
</Link>

단, detail 페이지에서도, state를 받을 수 있는 코드를 작성해주어야 한다.

// detail.jsx

// const {state} = useLocation();
const location = useLocation();
const detailData = location.state;

const {id, title, name, content} = detailData

이제 detailData 안에는 state로 넘겨준 데이터들이 존재하게 된다.