detail 페이지 만들기

리액트 라우트 적으로 구현해보자 => useParams()함수 이용

 

- App.js

import './App.css';
import { useState } from 'react';
import data from './data.js';
import {Routes, Route } from 'react-router-dom';
import DeatailPage from './pages/DetailPage';

function App() {
  let [shoes] = useState(data);
  let navigate = useNavigate();

  return (
    <div className="App">
      <Routes>
        <Route path="/detail/:id" element={<DeatailPage shoes={shoes}></DeatailPage>}/>  //상세페이지로 이동
      </Routes>
    </div>
  );
}

export default App;

- DetailPage.js

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

function DeatailPage(props) {
    let {id} = useParams();   //useParams함수를 이용하여 url파라미터 받아오기
    
    return (
      <div className="container">
        <h4 className="pt-5">{props.shoes[id].title}</h4>
        <p>{props.shoes[id].content}</p>
        <p>{props.shoes[id].price}</p>
        <button className="btn btn-danger">주문하기</button> 
      </div> 
    )
  }

export default DeatailPage;