lifesycle 질문있습니다.

강의를 리액트에서 라이프사이클 까지 듣고 있는데요. 
      <Route path="/detail" element={<Detail/>}/><-이걸 실행하면 detail/12345에서 오류나고
   <Route path="/detail/:id" element={<Detail shoes={shoes} />} /><-이걸 실행하면 detail에서 오류나는데 
왜그런건가요? 어떻게 고쳐야 하나요?

app.jsx

import { Button,Navbar,Container,Nav } from 'react-bootstrap';
import { useState } from 'react'
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import data from './data.js';
import { BrowserRouter as Router, Routes, Route, Link,useNavigate,Outlet  } from 'react-router-dom';
import { use } from 'react';
import Detail from './routes/Detail.jsx';

function App() {

  const [count, setCount] = useState(0)
  let [shoes] =useState(data)
  let navigate=useNavigate();
  
  return (
    <>

    <Button variant="primary">Primary</Button>
          <Navbar bg="dark" data-bs-theme="dark" >
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link onClick={()=>navigate('./')}>Features</Nav.Link>
            <Nav.Link onClick={()=>navigate('/detail')}>detail</Nav.Link>
          </Nav>
        </Container>
      <Link to="/">홈</Link>
      <Link to="/detail">디테일</Link>
      <div className='main-bg'>
       

</div>

      </Navbar>

      <Routes>
      <Route path="/" element={<div>
        <>
        <Container>
      <Row>
        {
        shoes.map(function(a,i){
          return(
            <Card shoes={shoes[i]} i={i+1}>/</Card>
        )

        })}
        <Col sm>쥬탬므</Col>
        <Col sm>치킨</Col>
      </Row>
    </Container>
        </>
      </div>}/>
      
      <Route path="/detail" element={<Detail/>}/>
      {/* <Route path="/detail/:id" element={<Detail shoes={shoes} />} /> */}
      <Route path="*" element={<div>없는페이지에요.</div>}>
      </Route>
 
        
        
  
      </Routes>

      <br />
     

    </>
  )
}

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

export default App

Detail.jsx

import{useEffect, useState} from "react";
import { useParams } from "react-router-dom";
function Detail(props){
    let{id}=useParams();
    let 찾은상품=props.shoes.find(function(x){
        return x.id==parseInt(id)
    
    })
    let [Alert,setAlert]=useState(true)

    useEffect(()=>{
        let a= setTimeout(() => {
            setAlert(false)
        }, 100000);
        return()=>{clearTimeout(a)}
    },[])

    return(
        <div>
            {
                alert==ture?<div>초이내구매시할인</div>:setAlert=false
            }
        </div>
    );

    // console.log(id);
    return(
        <div className="col-md-4">
        < img src={'https://codingapple1.github.io/shop/shoes'+props.i+'.jpg'} width="80%" />
        <h4>{ props.shoes[id].title }</h4>
        <p>{ props.shoes[id].price }</p>
      </div>
      )
}
export default Detail;

• 이 게시글은 22에 의해 4 월, 3 주 전에 수정됐습니다.