REACT URL parameters

Hyein Son·2020년 7월 5일

React

동적 라우팅

-라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것
-상품리스트 페이지에서 상품 상세페이지로 이동할 때 사용한다.

Route로 설정한 컴포넌트의 props

-Route로 설정한 component는 history, location, match 3가지의 props를 그 component에 넘겨준다.

1.history

push, replace를 통해 다른 페이지로 이동할 수 있다.
ex) this.props.history.push('경로')

2.location

현재 경로에 대한 정보와 url쿼리에 대한 정보를 가지고 있다.

3.match

-어떤 라우트에 매칭이 되었는지에 대한 정보를 가지고있다.

params: {id: "5"}
path: "/url-parameters/:id"
url: "/url-parameters/5"

상품리스트 페이지에서 상세 페이지로 이동하기

1. Route 설정

<Route exact path="/propduct-list" component={ProductList} />
<Route exact path="/product-detail/:id" component={ProductDetail} />

-상품리스트 페이지와 상세페이지를 Route설정한다. 상세 페이지는 parameter를 id로 하는 path를 설정한다.

2. 상품이미지 컴포넌트를 클릭 시 페이지 이동

class ProductList extends React.Component{
  
  clickHandler = (id) => {
      this.props.history.push(`/product-detail/${id}`);
    };

  render(){
    return(
   <div className = "Product-list">
   this.props.data.map((item, idx) => {
     return (
      <Product
             onClick={() => this.clickHandler(item.product_id)}
             id={item.product_id}
             name={item.product_name}
             price={item.product_price}
             imageUrl={item.product_images[0]}
             imageHovered={item.product_images[1]}
             colors={item.button_images}
          />
     )
    })
    </div>
   )
  }
}

-상품 이미지에 onClick이벤트가 발생하면 상품의 product_id를 params로하는 경로로 이동한다.
-만약 컴포넌트를 Route 지정하지 않은 페이지에서 상품 클릭이 발생한다면 withRouter를 사용해야한다.(Route를 지정하지 않은 페이지에서는 props로 history, location, match를 가지지 않는다.)

상세 페이지 진입

componentDidMount() {
    const { id } = this.props.match.params;
      fetch(`${API_URL}/product/${id}`)
        .then((res) => res.json())
        .then((res) =>
          this.setState({
            detailData: res.product_data,
          })
        );
    }