React - 네비 + 라우팅

네비는 맨위에 위치하고 각 화면으로 이동시킴
디자인 : react-bootstrap
이동 : 라우팅

컴퍼넌트화를 통해 각 화면은 각 화면용으로 따로 구현

Navbar.jsx

import { Navbar, Container, Nav} from 'react-bootstrap'    // 리엑트 부트스트랩 라이브러리

export function HomeNavbar(){
    return(
        <div>
            <Navbar bg="dark" variant="dark"> 
            <Container>
            <Navbar.Brand href="/home">ShoesShop</Navbar.Brand>
            <Nav className="me-auto">
                <Nav.Link href="/home">Home</Nav.Link>
                <Nav.Link href="./detail">Detail</Nav.Link>
                <Nav.Link href="./cart">Cart</Nav.Link>
                <Nav.Link href="./myPage">MyPage</Nav.Link>
                <Nav.Link href="./func">Func</Nav.Link>
            </Nav>
            </Container>
            </Navbar>
        </div> 
    ) 
}

Routes.jsx

import { Routes, Route, Navigate } from 'react-router-dom'  // 화면전환할때 쓰는 라우터 라이브러리
import Home from '../views/Home.jsx';
import DetailPage from '../views/Detail.jsx'
import Cart from '../views/Cart.jsx'
import MyPage from '../views/MyPage.jsx';
import Func from '../views/Func.jsx';

const MyRoutes = ({shoes, setShoes}) => {
    return (
        <Routes>
            {/* <Suspense fallback={ <div>로딩중임</div> }></Suspense> // 로딩중일시 보여줄 값 . 라우트를 감싸면 됨 */} 

            {/* 홈 이동 */}
            <Route path="/" element={ <Navigate replace to="/home"/> } />  
            <Route path="/home" element={ <Home shoes={shoes} setShoes={setShoes}/> } />  

            {/* 상세 이동 - 전체 */}
            <Route path="/detail" element={ <DetailPage shoes={shoes} /> } />  

            {/* 상세 이동 - 각각 */}
            <Route path="/detail/:id" element={ <DetailPage shoes={shoes} /> } />  
            {/* shoes={shoes} : 자식 컴포넌트로 데이터 전달 */}
            {/* :id : url로 받은 데이터를 사용할 수 있게 해줌 */}

            {/* 카트 이동 */}
            <Route path="/cart" element={ <Cart/> } />

            {/* MyPage 이동 */}
            <Route path="/myPage" element={ <MyPage/> } />

            {/* Func 이동 */}
            <Route path="/func" element={ <Func/> } />

             {/* 404 이동 */}     
             <Route path="*" element={ <div>없는페이지누</div> } />  
             
        </Routes>
    )
}

export default MyRoutes

라우터는 URL이 변경될 때마다 전체 페이지를 새로 고침하지 않고, 해당 URL에 맞는 컴포넌트를 동적으로 렌더링한다.

메인페이지, 상세페이지에선 데이터를 뿌려주기 위해서 shoes, setShoes 값들을 받아온다.

• 동작순서
  네비버튼 클릭 > url 변경 > 라우터가 url 감지 및 동작

요로콤 간단하다.

---

다음 게시글은 메인페이지인데 할게 많네
1,2 정도로 나눠야 할듯

contexp api
button
useState, props
context api
react-query