TIL44.동적라우팅
'동적라우팅'을 이용해서 상품리스트페이지에서 해당 상품을 클릭하여 상세페이지로 넘어가보자.
동적라우팅(Dynamic Routing)이란?
동적라우팅이란 라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 기능을 말한다.
'Query parameters', 'URL parameters' 두가지 방법을 통해 유동라우팅을 구현할 수 있다.
url 의 path와 qurery string 을 이용하여 어떤 정보를 불러올지 결정한다.
http://a.com/coffee?id=1
'http://'은 프로토콜, 'a.com'은 도메인, 'coffee'는 path, 'id=1'은 query string이라고 부른다.
라우트로 설정한 3가지 props
라우트로 설정한 컴포넌트는 기본적으로 객체형태의 3가지 props를 전달받는다.
history: history 객체의 push, replace를 통해 다른 경로로 이동시키거나 앞 뒤 페이지로 전환할 수 있다.(this.props.hsitory.push('/page')
location: 현재 경로에 대한 정보와 url쿼리에 대한 정보를 가지고 있다.
match: 어떤 라우트에 매칭이 되었는지와 params(/detail/:id)정보를 가지고 있다.
제품리스트페이지에서 상세페이지로 이동
동적라우팅이 가장 많이 사용되는 곳이 리스트 페이지에서 상세페이지로 이동될 때이다.리스트 페이지에서 어떤 상품을 클릭했는지 파악하고 API를 호출하는 것이 포인트이다.
Routes.js
import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import ProductList from "./Pages/ProductList/ProductList";
import ProductDetails from "./Pages/ProductDetails/ProductDetails";
import Navbar from "./Components/Navbar/Navbar";
class Routes extends Component {
render() {
return (
<Router>
<Navbar />
<Switch>
<Route exact path="/ProductList" component={ProductList} />
<Route exact path="/ProductDetails/:id" component={ProductDetails} />
</Switch>
</Router>
);
}
}
export default Routes;
상세페이지path에 id라는 params를 추가한 라우트가 필요하다.
card.js
import React, { Component } from "react";
import "../CardList/CardList.scss";
import { withRouter } from "react-router-dom";
class Card extends Component {
render() {
const { img, taste, company, name, price, id } = this.props;
return (
<div
onClick={() => this.props.history.push(`/ProductDetails/${id}`)}
className="cardContainer"
>
<div className="imgContainer">
<img src={img} alt="product_pic" />
</div>
<div className="taste">
<h2>{taste}</h2>
</div>
<div className="productInfo">
<h3 className="companyName">{company}</h3>
<h2>{name}</h2>
<h3 className="price">{`$${price}`}</h3>
</div>
</div>
);
}
}
export default withRouter(Card);
ProductList 페이지 안에서 Card 컴포넌트가 렌더된다. 라우팅을 사용하기위해서 withRouter를 import 해주고, export 에서 감싸준다.
cardContainer에 onClick 이벤트로 해당 card의 props의 id 값이 담긴 url 주소로 push 해준다.(상세페이지로 이동)
ProductDetails
componentDidMount() {
fetch(APIProductDetails + `/${this.props.match.params.id}`)
.then((res) => res.json())
.then((res) => {
this.setState({
productSummary: res.foundProduct,
coffee: res.foundProduct.coffees,
roaster: res.foundProduct.coffees.roasters,
});
});
}
//컴포넌트가 마운트 되었을 때 해당 id의 json data를 state에 업데이트 해준다.
Author And Source
이 문제에 관하여(TIL44.동적라우팅), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jo_love/TIL44.동적라우팅저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)