1

리액트의 Link 태그로 state를 페이지끼리 전달받을 수 있다.
버전 "react": "^18.2.0"

import { Link } from 'react-router-dom';

 <Link to={'/이동할페이지'} state={{ name: (전송할 값 작성) }} /> 

// 이동된 페이지에서 작성할 코드
const { state } = useLocation();
console.log(state);  // state로 받아온 값이 출력된다

2

타입스크립트를 사용할때,

interface LocationState {
  state: {
    name: string;
  };
}

const 컴포넌트이름 = () =>{
   const { state } = useLocation() as LocationState;

   return {
     {state?.name}
   }  
}

<> 대신에 as 를 사용해준 이유는 react-router-dom v6부터 제네릭을 지원하지 않기 때문이다.