리액트 라우터 : Error 질문

[임예지]

Uncaught TypeError: Cannot read properties of undefined (reading 'shoes') 
들이 뜨면서 디테일 페이지, 메인페이지 아무것도 안 보입니다

코드에 어떤 문제가 있는지 모르겠어서 질문 올립니다

(App.js)
<Route path="/detail" element={<Detail shoes={shoes} />}></Route>
(Detail.js)
function Detail(props) {
  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 mt-4">
          <h4 className="pt-5">{props.shoes[0].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;

[임예지]

App.js 파일 전체 올려봅니다
(App.js)
import { useState } from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { Navbar, Container, Nav } from "react-bootstrap";
import data from "./data.js";
import { Routes, Route, Link, useNavigate, Outlet } from "react-router-dom";
import Detail from "./routes/Detail.js";

function App() {
  let [shoes] = useState(data);
  let [details] = useState(Detail);
  let navigate = useNavigate();
  return (
    <div className="App">
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">ShoesBox</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link
              className="home-btn"
              onClick={() => {
                navigate("/");
              }}
            >
              Home
            </Nav.Link>
            <Nav.Link
              className="detail-btn"
              onClick={() => {
                navigate("/detail");
              }}
            >
              Detail
            </Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      <Routes>
        <Route
          path="/"
          element={
            <>
              <div className="main-bg" style={{ backgroundImage: "url(/bg.png)" }}></div>
              <div className="container">
                <div className="row">
                  {shoes.map((v, i) => {
                    return <Card shoes={shoes[i]} key={i} i={i} navigate={navigate} />;
                  })}
                </div>
              </div>
            </>
          }
        ></Route>
        <Route path="/detail" element={<Detail shoes={shoes} />}></Route>
        <Route path="*" element={<div>404 페이지</div>}></Route>
      </Routes>
    </div>
  );
}

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

function EventPage() {
  return (
    <div>
      <h4>오늘의 이벤트</h4>
      <Outlet></Outlet>
    </div>
  );
}

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

[codingapple]

shoes 왼쪽이 비어있다는 소리인데 shoes들 왼쪽 확인해봅시다

[임예지]

shoes 왼쪽이 비어있다는 게 무슨 소리인지 모르겠습니다 ㅠㅠ

[codingapple]

shoes 왼쪽에 있는 변수들 출력해봅시다

[글쓴이]

글