Typescript에서 React location의 state값 선언

 

리액트에서 Link에 state를 이용하여 이동하는 페이지에 특정값을 전달할 수 있습니다.  전달받은 페이지에서는 'useLocation' 항목을 이용하여 해당 값을 받아올 수 있는데 이 부분을 TypeScript를 적용하게 되면 오류가 발생하게 됩니다. 전달받은 값에 대한 타입이 지정되지 않았기 때문인데 이 부분을 쉽게 설명하고 해결하는 방법이 있어서 공유합니다. 

 

State를 이용하여 값 전달

<Link
  to={`${process.env.PUBLIC_URL}/details/`}
  state={{
    myState: state.id    
}}

Location 값에 TypeScript를 적용

 

 

interface CustomizedState {
  myState: string
}

const location = useLocation();
const state = location.state as CustomizedState; // Type Casting, then you can get the params passed via router
const { myState } = state;

 

감사합니다.

 

출처 :https://github.com/reach/router/issues/414