React - 라우팅, navigate

react에서 페이지를 이동할 때 가장 중요한 라우팅

npm install react-router-dom@6

입력해서 설치 후

<BrowserRouter>
      <App />
</BrowserRouter>

index.js 파일에서 위와 같이 app 태그를 BrowserRouter 태그로 감싸줌

import {Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom';

그리고 이거 import 하면 준비 완료.

 <Route path='/detail' element={<Detail></Detail>}/>

Detail.js

import data from '../data';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Button, Navbar, Container, Nav, Row, Col} from 'react-bootstrap';
import { useState } from 'react';

export default function Detail() {
    let [shoes] = useState(data)
    return(
        <Container>
            <Row>
                <Col>
                    <img src='https://codingapple1.github.io/shop/shoes1.jpg' width="100%" />
                </Col>
                <Col>
                    <h4>{shoes[0].title}</h4>
                    <p>상품설명</p>
                    <p>120000원</p>
                    <Button variant="danger">주문하기</Button>
                </Col>
            </Row>
        </Container>
    );
}

detail 컴포넌트를 만들고난 후 App.js 파일에 라우트를 걸어 라우팅 성공.

--페이지 이동기능을 위한 useNavigate()--
원래 Link 태그로 페이지 이동이 가능하다고 배웠는데 이는 href와 같이 생겨서 못생김. 그래서 useNavigate를 사용하면 더 좋다. 따로 버튼을 만드는게 아닌 함수로 바로 페이지 이동을 실행할 수 있어 효율 good.

<Nav.Link onClick={()=>{navigate('/detail')}}>Detail</Nav.Link>

--404페이지 만들기--

<Route path='*' element={<div>없는 페이지입니당</div>} />

path에 *하나 넣으면 url에 잘못 입력했을 때 element 안의 내용을 보여줌.

출처 : https://codingapple.com/