React Router 리액트 라우터 활용편 - 상세페이지 제작 Answer

1. App.js

import { Route } from 'react-router-dom';

<Route path="/detail/:id">
   <Detail items={ items }></Detail>
</Route>

2. Item.js

import { Link } from 'react-router-dom';

<Link to={"/Detail/" + props.item.id }> 
   <img src={"images/img"+ (props.i + 1) +".jpg"} width="100%" />
   <h3>{ props.item.country }, { props.item.city }</h3>
   <p>{ props.item.price } won</p>
</Link>

3. Detail.js

import { useParams } from 'react-router-dom';

let { id } = useParams(); 
let matchedItem = props.items.find(function(item){
   return item.id == id;
});

props.item[item위치] ➜ matchItem

---

import { useState } from 'react';
import './App.css';
import itemList from './data';
import Item from './Item.js';
import Detail from './Detail.js';
import { Route } from 'react-router-dom';

function App() {
  let [items, itemsFunc] = useState(itemList);
  return (
    <div className="App">
      <Route exact path="/">
        <div className="container">
          <div className="row">
            {
              items.map(function( item, i ){
                return (
                  <Item item={ items[i] } i={i} key={i} />
                )
              })
            }
          </div>
        </div>
      </Route>
      <Route path="/detail/:id">
        <Detail items={ items }></Detail>
      </Route>
    </div>
  );
}

export default App;

import React from "react";
import { Link } from 'react-router-dom';

function Item(props){
    return (
        <div className="col-md-5">
            <Link to={"/Detail/" + props.item.id }> 
                <img src={"images/img"+ (props.i + 1) +".jpg"} width="100%" />
                <h3>{ props.item.country }, { props.item.city }</h3>
                <p>{ props.item.price } won</p>
            </Link>
        </div>
    )
}

export default Item;

import React from "react";
import { useParams } from 'react-router-dom';

function Detail(props){
    let { id } = useParams(); 
    let matchedItem = props.items.find(function(item){
        return item.id == id;
    });
    const imgUrl = "../images/img"+ matchedItem.id +".jpg"
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                    <img src={ imgUrl } width="100%" />
                </div>
                <div className="col-md-6 mt-3">
                    <div className="alert alert-danger">The maximum number of guests is 2 guests. </div>
                    <h4>{ matchedItem.country }, { matchedItem.city }</h4>
                    <h5 className="mb-3"><b>{ matchedItem.price }</b> won</h5>
                    <button className="btn btn-dark">Reservation</button> 
                    <button className="btn btn-secondary">Back to main</button> 
                </div>
            </div>
        </div> 
    )
}

export default Detail;