[react 기록용, 쇼핑몰]2-7.route (URL, 상세페이지 )

메인 페이지: route로 상세페이지 불러오기

/*eslint-disable-next-line*/
import React, {useState} from 'react';
import { Button,Navbar,Nav,NavDropdown,Jumbotron,} from 'react-bootstrap';
import './App.css';
import Data from './data.js';
import Detail from './Detail.js';
import { Link, Route, Switch } from 'react-router-dom';

function App() {
  let [shoes, shoes변경] = useState(Data);
  return (
    <div className="App">
      <Switch>
        <Route exact path="/">
          메인페이지
        </Route>
        <Route path="/detail/:id">
          상세페이지
          <Detail shoes={shoes}/>
        </Route>
      </Switch>     
    </div>
  );
}

export default App;

 

 

상세페이지

import React, {useState} from 'react';
import {useHistory, useParams } from 'react-router-dom';

function Detail(props){
    // {사용자가 입력한 URL 파라미터 값이 넘어옴}
    let { id } = useParams();
    // return 오른쪽에 조건식을 만족하면, '찾은상품'에 값이 저장됨
    let 찾은상품 = props.shoes.find(function(상품){
        return 상품.id == id
    });
    return(
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                    <img src={'https://codingapple1.github.io/shop/shoes1.jpg'} width="100%" />
                </div>
                <div className="col-md-6 mt-4">
                    <h4 className="pt-5">{찾은상품.title}</h4>
                    <p>{찾은상품.content}</p>
                    <p>{찾은상품.price}원</p>
                    <button className="btn btn-danger">주문하기</button> 
                    <button className="btn btn-danger" onClick={()=>{ history.push('/')}}>뒤로가기</button> 
                </div>
            </div>
        </div> 
    )
}
export default Detail;