[React] React에서 라우팅되는 컴포넌트에 props 전달하기 (react-router)

Route 컴포넌트의 props

- path : 라우팅할 컴포넌트의 URL

- component : path props에 지정한 URL 클릭 시 렌더링 할 컴포넌트

이 외에도 Route 컴포넌트는 기본적으로 history, location, match 등의 props를 가진다.

(다른 컴포넌트에서 Link를 이용해서 해당 경로로 넘어왔을 경우 그 때 props를 전달하려면 <Link to = {{pathname: , state : {}}}></Link> 이렇게 state를 통해서 props를 전달하면 되고 이 때 전달한 props는 전달받은 컴포넌트에서 location.state안에 있다.

 

라우팅 되는 컴포넌트에 props 전달하기

Route 컴포넌트에 의해 렌더링되는 컴포넌트에 props를 전달해야한다면 render props를 사용하여 라우팅되는 컴포넌트에 props를 전달한다. 이 때 component props는 사용할 필요가 없다.

<Route
  path="/sport"
  render={() => <Sport youtube={youtube} />}
/>

단 위와 같이 작성하게 되면 Sport 컴포넌트는 라우팅 관련 props인 history, location, match 등이 사라지게 되므로 이를 방지하기 위해서 스프레드 연산자를 이용하여 props를 전달해야 한다.

<Route
  path="/sport"
  render={(props) => <Sport youtube={youtube} {...props} />}
/>

---

출처 및 참고

ing-yeo.net/2020/10/react-beginner-5/