-
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import { useState } from 'react';
import {Button, Navbar, Container, Nav} from 'react-bootstrap'
import data from './data.js'
import { Routes, Route, Link } from "react-router-dom"function App() {
let [shoes] = useState(data)
console.log(shoes)
return (
<div className='app'>
<div>
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand href="#home">Navbar</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
</Nav>
</Container>
</Navbar><link to="/">홈</link>
<link to="/detail">상세페이지</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 + 1}></Card>
)
})
}
</div>
</div>
</>
} />
<Route path='/detail' element={<dvi>상세페이지임</dvi>}/>
<Route path='/about' element={<dvi>about페이지임</dvi>}/>
<Route />
<Route />
</Routes>
</div>
</div>
);
}
function Card(props) {
return (
<div className="col-md-4">
<h4>{props.shoes.title}</h4>
<p>{props.shoes.content}</p>
<p>{props.shoes.price}</p>
</div>
)
}export default App;
이렇게 만들었는데......
<link to="/">홈</link>
<link to="/detail">상세페이지</link>이부분을 넣으면 흰색으로 화면이 나오고
지우면 정상적으로 작동하네요 어떤 오류를 범햇을까요 ㅠㅠ
강의따라 진행중입니다 ㅠㅠ
- 답변은 로그인 후 가능합니다.