INDEX

1. 페이지 나누는 법
2. 리액트 라우터 설치, 셋팅
3. 리액트 라우터 사용법
4. 페이지 이동버튼 만들기

1. Detail.js 생성

   function Detail() {
       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">
                       <h4 className="pt-5">상품명</h4>
                       <p>상품설명</p>
                       <p>120000원</p>
                       <button className="btn btn-danger">주문하기</button> 
                   </div>
               </div>
           </div> 
       );
   }
   
   export default Detail;
   

2. route 설치

   npm install react-router-dom@6
   

   설치 후

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import './index.css';
   import App from './App';
   import reportWebVitals from './reportWebVitals';
   import {BrowserRouter} from "react-router-dom";
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(
       **<BrowserRouter>
           <App />
       </BrowserRouter>**
   );
   
   // If you want to start measuring performance in your app, pass a function
   // to log results (for example: reportWebVitals(console.log))
   // or send to an analytics endpoint. Learn more: <https://bit.ly/CRA-vitals>
   reportWebVitals();
   

3. 리액트 라우터 사용법

   import './App.css';
   import { Navbar, Container, Nav } from 'react-bootstrap';
   import { useState } from 'react';
   import data from './data.js';
   import { Routes, Route, Link } from 'react-router-dom';
   
   function App() {
     let [shoes] = useState(data);
   
     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>
         <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>
         **<Routes>
           <Route path="/" element={<div>홈페이지</div>}/>
           <Route path="/detail" element={<div>상세페이지임</div>}/>
           <Route path="/about" 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 } from 'react-router-dom';
   
   function App() {
     let [shoes] = useState(data);
   
     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={<div>상세페이지임</div>}/>
           <Route path="/about" 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;
   

4. 페이지 이동버튼 만들기

   <Link to="/">홈</Link>
   <Link to="/detail">상세페이지</Link>