detail/0을 입력했을 경우 상세페이지가 보이지 않습니다..

타입스크립트 관련 프로그램을 깔았어서 그것때문인가 싶어  json에서도 뺏지만 계속 요류가 나서 올립니다..

detail/0을 입력하면 계속 오류가 나오고 있는 상태입니다..

<strong>App.js</strong>

/* eslint-disable */
import React, { useState } from "react";
import { Navbar, Nav, NavDropdown, Jumbotron, Button } from "react-bootstrap";
import "./App.css";
import Data from "./data.js";
import Detail from "./Detail";

import { Link, Route, Switch } from "react-router-dom";

function App() {
let [dessert, dessert변경] = useState(Data);

return (
<div className="App">
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">DessertShop</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link>
<Link to="/">Home</Link>
</Nav.Link>
<Nav.Link>
<Link to="/detail">Detail</Link>
</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">
Another action
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>

<Switch>
<Route exact path="/">
<Jumbotron className="background">
<h1>Yummy Dessert</h1>
<p>
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</p>
<p>
<Button variant="primary">Learn more</Button>
</p>
</Jumbotron>
<div className="container">
<div className="row">
{dessert.map((a, i) => {
return <Card dessert={dessert[i]} i={i} key={i} />;
})}
</div>
</div>
</Route>
<Route path="/detail/:id">
<Detail dessert={dessert} />
</Route>

<Route path="/:id">
<div>아무거나</div>
</Route>
</Switch>
</div>
);
}

function Card(props) {
return (
<div className="col-md-4">

<h4>{props.dessert.title}</h4>
<p>
{props.dessert.content} & {props.dessert.price}
</p>
</div>
);
}

export default App;

<strong>Detail.js</strong>

/* eslint-disable */
import React, { useState } from "react";
import { useHistory, useParams } from "react-router-dom";
import styled from "styled-components";

// let 박스 = styled.div`
// padding: 20px;
// `;

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

let 찾은상품 = props.dessert.find((x) => x.id === id);

return (
<div className="container">
<div className="row">
<div className="col-md-6">

</div>
<div className="col-md-6 mt-4">
<h4 className="pt-5">{찾은상품.title}</h4>
<p>{찾은상품.content}</p>
<p>{찾은상품.price}</p>
<button className="btn btn-danger">주문하기</button>
&nbsp;
<button
className="btn btn-danger"
onClick={() => {
history.push("/");
}}
>
뒤로가기
</button>
</div>
</div>
</div>
);
}
export default Detail;

<strong>package json</strong>

{
"name": "shop",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "4.6.0",
"react": "^17.0.2",
"react-bootstrap": "1.6.1",
"react-dom": "^17.0.2",
"react-router-dom": "5",
"react-scripts": "5.0.0",
"styled-components": "^5.3.3",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test"
},
"eslintConfig": {
"extends": [
"react-app"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}