useParams undefined 오류

[문종후]

상세페이지강의내용관련 질문드립니다!
<APP.js>

import './App.css';
import React from 'react'
import { ReactDOM, useState } from 'react';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import {data} from './data.js'
import { Routes, Route, Link,useNavigate,Outlet, useParams } from 'react-router-dom'
import Detail from'./Detail.js'

function App() {
  let [shoes]=useState(data)
  let navigate=useNavigate();
  
  
  return (
    <div className="App">
       <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">ShoeShop</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link onClick={()=>navigate('/')}>Home</Nav.Link>
            <Nav.Link onClick={()=>navigate("/detail")}>Detail</Nav.Link>
            
          </Nav>
        </Container>
      </Navbar>
      
      <div className='main-bg'></div>
      <Routes>
        <Route path="/" element={<Row><Col>
        <Card Shoes={shoes[0]} i={1}></Card></Col>
        <Col><Card Shoes={shoes[1]} i={2}></Card></Col>
        <Col><Card Shoes={shoes[2]} i={3}></Card></Col></Row>}>
      </Route>
        <Route path="/detail/:id" element={ <Detail shoes={shoes}/> }/>
        <Route path="/about" element={<About></About>}></Route>
        <Route path="*" element={<div>없는페이지요</div>}></Route>
        
      </Routes>
      
    </div>
  );
  
}

function Card(props){
  return (
    <div className="col-md-4">
      < img src={'https://codingapple1.github.io/shop/shoes' + props.i + '.jpg'} width="100%" />
      <h4>{ props.Shoes?.title }</h4>
      <p>{ props.Shoes?.price }</p>
    </div>
  )
}

function About(){
  return(
    <div>
      <h4>회사 정보임</h4>
    </div>
  )

export default App;

<Detail.js>

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

function Detail(props){
  let {id} =useParams;
  console.log(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">
      <h4 className="pt-5">{props.shoes[id].title}</h4>
      <p>{props.shoes[0].content}</p>
      <p>{props.shoes[0].price}</p>
      <button className="btn btn-danger">주문하기</button> 
    </div>
   </div>
  </div>
    
  )
}

export default Detail;

내용에서 params 값을 console.로 찍으면 undefined가찍힙니다.
속성명과 변수명도 id로 잘맞춰주었고 console.log에 undefined가 찍혀 이후 데이터바인딩에도 오류가생기는것같습니다!

이런경우 undefined가뜨는이유가궁금합니다.

[codingapple]

useParams() 입니다

[문종후]

앗 .. 감사합니다 선생님

[글쓴이]

글