리액트 라우터 2 / 에러 질문드립니다.

[방서빈]

디테일 페이지에 사진이나 글자는 뜨지 않고 콘솔창에 아래와 같은 에러가 출력됩니다. 이유가 무엇일까요?

[방서빈]

mport './App.css';
import data from './data.js';
import { useState } from "react";
import Cart from './routes/Cart.js';
import Detail from './routes/Detail';
import {Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom';

function App() {
let [shoes] = useState(data);
return (
<div className="App">
<nav className="navbar navbar-expand-lg bg-light">
<div className="container-fluid">
Navbar
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
Home

<li className="nav-item">
Features

<li className="nav-item">
Pricing

<li className="nav-item">
Disabled


</div>
</div>
</nav>

<Link to={'/detail'}>Detail</Link>
<Link to={'/'}>Home</Link>

<Routes>
<Route path="/" element={
<>
<div className='main-bg'></div>
<div className='container'>
<div className="row">
{
 shoes.map((a, i)=> {
return (
<Card shoes={shoes[i]} i={i}></Card>
 )
})
}
</div>
</div>
</>
} />
<Route path='/detail' element={<Detail/>}></Route>
</Routes>

</div>
)}

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

export default App;

[codingapple]

map으로 반복문 돌린 요소엔 key={i} 이런거 넣어둬야합니다

[방서빈]

<Card shoes={shoes[i]} i={i}></Card> 이렇게 하고 < img src={'https://codingapple1.github.io/shop/shoes'+ (props.i + 1) + '.jpg'} width="80%" /> 이곳에 i 태그를 썼습니다

[codingapple]

key={i} 속성도 넣읍시다

[글쓴이]

글