INDEX

1. 저번시간 숙제
2. 폴더 어떻게 나눔
3. 배울거1. navigate 함수
4. 배울거2. 404페이지
5. 배울거3. nested routes

1. navigate 함수

   import './App.css';
   import { Navbar, Container, Nav } from 'react-bootstrap';
   import { useState } from 'react';
   import data from './data.js';
   import { Routes, Route, Link, **useNavigate, Outlet** } from 'react-router-dom';
   import Detail from './route/Detail';
   
   function App() {
     let [shoes] = useState(data);
     let navigate = useNavigate();
   
     return (
       <div className='App'>
         <Navbar bg="dark" variant="dark">
           <Container>
             <Navbar.Brand href="/">Navbar</Navbar.Brand>
             <Nav className="me-auto">
               <Nav.Link href="/">Home</Nav.Link>
               <Nav.Link href="/cart">Cart</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 (
                         <Product key={i} shoes={shoes[i]} i={i} />
                       )
                     })
                   }
                 </div>
               </div>
             </>
           }/>
           <Route path="/detail" element={<Detail />}/>
           <Route path="*" element={<div>잘못된 접속입니다.</div>}/>
         </Routes>
       </div>
     );
   }
   
   function Product(props) {
     return (
       <div className="col-md-4">
         <img src={process.env.PUBLIC_URL + '/img/shoes'+(props.i+1)+'.jpg'} width="80%" />
         <h4>{props.shoes.title}</h4>
         <p>{props.shoes.content}</p>
         <p>{props.shoes.price}</p>
       </div>
     )
   }
   
   export default App;
   

   import './App.css';
   import { Navbar, Container, Nav } from 'react-bootstrap';
   import { useState } from 'react';
   import data from './data.js';
   import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom';
   import Detail from './route/Detail';
   
   function App() {
     let [shoes] = useState(data);
     let navigate = useNavigate();
   
     return (
       <div className='App'>
         <Navbar bg="dark" variant="dark">
           <Container>
             <Navbar.Brand href="/">Navbar</Navbar.Brand>
             <Nav className="me-auto">
               <Nav.Link href="/">Home</Nav.Link>
               <Nav.Link href="/cart">Cart</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 (
                         <Product key={i} shoes={shoes[i]} i={i} />
                       )
                     })
                   }
                 </div>
               </div>
               **<button onClick={() => {
                 navigate('/detail')
               }}>이동버튼</button>**
             </>
           }/>
           <Route path="/detail" element={<Detail />}/>
           <Route path="*" element={<div>잘못된 접속입니다.</div>}/>
         </Routes>
       </div>
     );
   }
   
   function Product(props) {
     return (
       <div className="col-md-4">
         <img src={process.env.PUBLIC_URL + '/img/shoes'+(props.i+1)+'.jpg'} width="80%" />
         <h4>{props.shoes.title}</h4>
         <p>{props.shoes.content}</p>
         <p>{props.shoes.price}</p>
       </div>
     )
   }
   
   export default App;
   

   

2. 404 페이지

   <Route path="*" element={<div>잘못된 접속입니다.</div>}/>
   

3. nested routes

   서브경로 생성

   <Route path="/about" element={<About/>}>
     <Route path="member" element={ <div>멤버들</div> } />
     <Route path="location" element={ <div>회사위치</div> } />
   </Route>
   

과제

이벤트 페이지 2개 만들기

• 코드