버전 6에서부터는 안 됩니다...☆

🙆🏻‍♀️ [React] React-Router 🙆🏻‍♀️

< Route/>에 props 담아 보내기

SPA 개발 시, 뗄레야 뗄 수 없는 Router.
리액트에는 React-Router가 존재한다.

<Route exact path={path}
 render={props => <Component {...props} state={state} />} />

우선 불필요한 생성을 막기 위해 component에 사용하는 것이 아니라 render를 사용한다.

그다음, History api등을 쓰기 위해서(location, match, history) { ...props} 로 넘겨준다.

추가로 사용자가 작성한 상태값이나 함수 등은 위의 예시처럼 state={state}형태로 넘겨준다.

< Link />에 props 담아 보내기🏸

Route에 원하는 props를 담아 보내는 것은 수월하게 해결됐다.
프로젝트 진행 중 테이블 tr 별로 링크를 클릭하여 view화면에 진입할 때, 해당 tr의 idx값을 보내 조회하는 작업이 필요했다.
Link에는 어떻게 담아 보낼까...?🤔

<Link to={{
      pathname: "/path",
      state: "안녕 눈누!",
    }}
  >
    상세 조회
</Link>

위와 같이 작성한 뒤, 해당 컴포넌트에서는 location api 를 이용하여 접근하면 된다.

export default function path({ location }) {
  {location.state} // 안녕 눈누!
}

세상에, 간단해😏

React-Router v6이 정식 릴리즈 단계를 거치면 v5에서 v6으로 옮겨갈 예정...
좀 더 가볍고 직관적으로 바뀐 거 같아 기대 된다.

Render Props - 리액트 공식 문서
React Router v6 Preview - Michael Jackson