리액트 라우터 detail 페이지 오류 문제 입니다

/detail/0 이나 /detail/1 로 들어가면 상품이 잘 나오는데 /detail만 입력했을 때 
<Route path="*" element={<div>없는페이지예요</div>} />요 화면이 뜨는데 뭐가 문제일까요 ㅠ
콘솔에도 에러가 안떠서 이유를 모르겠습니다. 오타도 보고 리액트 프로젝트도 삭제했다가 새로 다 깔고
해봤는데도 그대로네요.. 
웬만해서 코드 그대로 따라치는거 안하려고 하는데 이런 오류가 생겨서 혹시나 강의 따라가면서 계속
따라 쳐봤는데도 똑같이 안나오네요... ㅠㅠ 

(App.js)

import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { Navbar, Container, Nav } from "react-bootstrap";
import data from "./data.js";
import { useState } from "react";
import Item from "./Item.js";
import Detail from "./Detail.js";

import EventPage from "./EventPage";
import { Routes, Route, useNavigate, Link, Outlet } from "react-router-dom";

function App() {
  let [shoes] = useState(data);
  let navigate = useNavigate(); // {훅}
  return (
    <div className="App">
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">CJ's room</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link
              onClick={() => {
                navigate("/");
              }}
            >
              Home
            </Nav.Link>
            <Nav.Link
              onClick={() => {
                navigate("/detail");
              }}
            >
              Detail
            </Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      <Routes>
        <Route
          path="/"
          element={
            <>
              <div className="main-bg"></div>
              <div className="container">
                <div className="row">
                  {shoes.map((a, i) => {
                    return <Item key={i} shoes={shoes[i]} i={i} />;
                  })}
                </div>
              </div>
            </>
          }
        />
        <Route path="/detail/:id" element={<Detail shoes={shoes} />} />
        <Route path="/event" element={<EventPage />}>
          <Route path="one" element={<h5>첫 주문시 양배추즙 서비스</h5>} />
          <Route path="two" element={<h5>생일 기념 쿠폰 받기</h5>} />
        </Route>
        <Route path="*" element={<div>없는페이지예요</div>} /> {/*404페이지*/}
      </Routes>
    </div>
  );
}

export default App;

(Detail.js)

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

function Detail(props) {
  let { id } = useParams();

  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[id].content}</p>
          <p>{props.shoes[id].price}</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>
  );
}

export default Detail;