React) 리액트 라우터 01_Routes/Route/Link

oching·2022년 5월 24일

목록 보기

12/23

애플리케이션에서도 여러 상세 페이지가 있을 것.
만약 Js라면,

1. html파일을 각기 다르게 만들고
2. /detail로 접속하면 해당 html파일을 보내줌

이러한 스텝으로 코드를 짤 수 있다.

하지만 react는 index.html로 하나의 html만을 갖는다.
따라서 React에서는,

1. 컴포넌트를 만들어서 페이지에 해당되는 컴포넌트로 채움
2. /detail로 접속하면 그 컴포넌트 보여줌

이걸 모두 조건으로 처리해야하는데
직접 코드를 짜려면 너무나 귀찮을듯..
그래서 쓰는 라이브러리 👉 React-router-dom

React-router-dom 사용법

1. npm install

npm install react-router-dom@6 //6버전 설치한다는 소리

2. index.js

BrowserRouter를 import해오고
<App/>을 <BrowserRouter> </BrowserRouter>로 감싸준다.

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>
);

3. App.js

3.1 페이지 나누기 Routes Route

우선 상단에서 여러가지 컴포넌트를 import 해오고
<Routes> 만들고 그 안에 <Route>를 작성한다.
<Route path="/url경로" element={ <보여줄html> } /> 구조로 작성.

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

function App(){
  return (
    (생략)
    <Routes>
      <Route path="/" element={ <div>메인페이지임</div> } />
      <Route path="/detail" element={ <div>상세페이지임</div> } />
      <Route path="/about" element={ <div>어바웃페이지임</div> } />
    </Routes>
  )
}

3.2 패이지 이동 버튼 Link

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

상세페이지에 올 내용을 컴포넌트화하고 export해와서 구현해보기

1.Detail.js라는 파일을 만들어 따로 Detail 컴포넌트를 만들고

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. App.js에서 import, 로 컴포넌트 사용

import Detail from './Detail';

<div className="App">

      <Link to="/">홈</Link>
      <Link to="/detail">상세페이지</Link>
      
      <Navbar bg="dark" variant="dark">
          <Container>
            <Navbar.Brand href="#home">Navbar</Navbar.Brand>
            <Nav className="me-auto">
              <Nav.Link href="#home">Home</Nav.Link>
              <Nav.Link href="#features">Features</Nav.Link>
              <Nav.Link href="#pricing">Pricing</Nav.Link>
            </Nav>
          </Container>
      </Navbar>

      <Routes>
        <Route path="/" element={  //메인페이지
          <>
            <div className="main-bg"></div>
            <div className='container'>
              <Row>
                {/* <Card shoes={shoes[0]} i={1}></Card>
                <Card shoes={shoes[1]} i={2}></Card>
                <Card shoes={shoes[2]} i={3}></Card> */}
                {
                  shoes.map((item, index)=>{
                    return(
                      <Card shoes={shoes[index]} i={index+1}></Card>
                    )
                  })
                }
              </Row>
            </div>
          </>
         }/>
        <Route path="/detail" element={ <Detail/> }/>  //상세페이지
      </Routes>