[React] Route / nested route

Route

- 페이지 단위를 나눌 때 사용 (routes 폴더에 각 페이지를 만들어 export -> App.js 에서 import 해서 사용)

nested route

- 같은 카테고리 안에서 세분화되는 내용들을 담음 (components 폴더로 분류해서 저장)

App.js

import logo from './logo.svg';
import './App.css';
import {Button, Navbar, Container, Nav, Col, Row} from 'react-bootstrap'
import img from './img/react-img.png';
import { useState } from 'react';
import data from './data.js';
import Main from './routes/main.js';
import Detail from './routes/detail.js';
import Event from './routes/event.js';
import About from './routes/about.js';
import {Service,Coupon} from './components/eventCompo.js';
import { Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom';

function App() {

  let [shoes,setShoes] = useState(data)
  let navigate = useNavigate() // 페이지 이동

  return (
    <div className="App">

       <Navbar bg="dark" variant="dark">
        <Container>
        <Navbar.Brand href="/">Shop</Navbar.Brand>
        <Nav className="me-auto">
          <Nav.Link onClick={()=>{navigate('/')}}>Home</Nav.Link> {/* navigate(1 : -> 앞으로가기 / -1 : <- 뒤로가기) */}
          <Nav.Link onClick={()=>{navigate('/detail')}}>Detail</Nav.Link>
        </Nav>
        </Container>
      </Navbar>
 
      <Routes>
          <Route path='/' element={<Main shoes={shoes} setShoes={setShoes}/>}/>  
          <Route path='/detail/:id' element={<Detail shoes={shoes}/>}/>  
          {/* path='/detail/:id' => :id 파라미터 detail/ 아무거나 입력 해도 element값을 보여줌 */}
          {/* 파라미터 여러개 사용 가능 path='/detail/:id/:no */}
          <Route path='*' element={<div>없는페이지</div>}/>

 		{/*
          nested route 

            <Route path='/about' element={<About/>}> --1 (1만 보여줌)
              <Route path='member' element={<div>member</div>}/>  --2 (1,2 동시에 보여줌)
              <Route path='location' element={<div>location</div>}/> --3  (1,3 동시에 보여줌)
            </Route>  
              ==
            <Route path='/about' element={<About/>}/>
            <Route path='/about/member' element={<div>member</div>}/>  
            <Route path='/about/location' element={<div>location</div>}/>  
          */}

          <Route path='/about' element={<About/>}> 
            <Route path='member' element={<div>member</div>}/>  
            <Route path='location' element={<div>location</div>}/>  
          </Route>  

          <Route path='/event' element={<Event/>}> 
            <Route path='one' element={<Service/>}/>  
            <Route path='two' element={<Coupon/>}/>  
          </Route>  
        </Routes>
  
      </div>

  );
}

export default App;

main.js

- sort : 

import { Container,Row,Col} from "react-bootstrap";

const Production = (props)=>{
    return(
      <Col md={4}>
            <img src={"https://codingapple1.github.io/shop/shoes"+(props.shoeList.id+1)+".jpg"} width="80%"/>
            <h4>{props.shoeList.title}</h4>
            <p>{props.shoeList.price}</p>
      </Col>)
    }

function compare(me, you){ //[{title: },{title: },{title: }] 각 object의 title을 두개씩 가져와서
    return me.title.localeCompare(you.title) // localeCompare : 문자를 비교
}

function Main(props){

    const sort = ()=>
        let copy = [...props.shoes]; // props 를 copy
        copy = copy.sort(compare); //object 형태라서 sort 바로 할 수 없음
        props.setShoes(copy);
    }

    return (
        <Container>
            <Row>
            {
                props.shoes.map((value,index)=>{
                    return (<Production key={index} shoeList ={value} />);
                })
            }
                <button onClick={sort}>정렬하기</button>
            </Row>
        </Container>
    )
}

export default Main;

detail.js

import { Container, Row, Col } from "react-bootstrap";
import { useParams } from "react-router";

function Detail(props){
    // App.js 에서 넘겨준 파라미터(:id) 를 받음
    let{id} = useParams();
    if(id >= props.shoes.length){
        return <div>없는상품입니다.</div>
    }
    //sort 한 값으로 상세페이지를 가져옴
    return(
        <div>
            <Container>
                <Row>
                    <Col md={6}>
                        <img src={"https://codingapple1.github.io/shop/shoes"+(props.shoes[id].id+1)+".jpg"} width="80%"/>
                        <h4>{props.shoes[id].title}</h4>
                        <p>{props.shoes[id].content}</p>
                        <p>{props.shoes[id].price}원</p>
                        <button className="btn btn-danger">주문하기</button>
                    </Col>                                       
                </Row>
            </Container>
        </div>
    )
   
}

export default Detail;

event.js

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

function Event(){
    return (
        <div>
            <Link to={"./one"}>서비스</Link> {/* Link to={"./one = one"} : path -> 현재페이지/one 경로와 같음 */}
            <Link to={"./two"}>생일</Link>
            <h3>오늘의 이벤트</h3>
            <Outlet></Outlet>	{/* nested route 위치 설정*/}
        </div>
    )
  }

  export default Event;