[React] 라우터_셋팅, 기본 라우팅

🦥 라우팅 - 셋팅, 기본 라우팅

페이지 나누는 방법

• 컴포넌트 만들어서 페이지 디자인
• 누가 /detail 요청시 해당 컴포넌트 출력
  ⇒ react-router-dom 라이브러리 사용하여 구현

---

react-router-dom 설치

• 설치

// 터미널

npm install react-router-dom@6

• 셋팅

// index.js

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

<BrowserRouter>
    <App/>
</BrowserRouter>

• <App/> 컴포넌트를 <BrowserRouter>로 감싸준기

---

페이지 나누기

1. 요청에 따라 출력시킬 컴포넌트 나누기

// App.js

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

function App(){
    return (
        <Routes>
            <Route path="/" element={html~~} /> // 메인 페이지
            <Route path="/detail" element={html~~~~} /> // detail 접속 요청시 element 출력
            <Route path="/about" element={html~~~~~} />
            <Route path="/asdf" element={컴포넌트} />
            <Route /> // 페이지 개수만큼
        </Routes>
    )
}

1. 사용할 컴포넌트 import
2. <Routes> 안에 <Route> 작성
3. <Route> 작성 : <Route path=”/url경로” element={ 보여줄 컴포넌트 } />

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

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

1. <Link to=”/url 경로”>링크 이름 달기</Link>

import "./App.css";
import { useState } from "react";
import { Routes, Route, Link } from "react-router-dom";
import productsData from "./data.js";

function App() {
  return (
    <div className="App">
      <Nav />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/detail" element={<div>상세페이지</div>} />
      </Routes>
    </div>
  );
}

function Nav() {
  return (
    <nav>
      <div className="shop-title">My Shop</div>
      <Link to="/">
        <div className="shop-home">Home</div>
      </Link>
      <div className="shop-cart">Cart</div>
    </nav>
  );
}

function Home() {
  let [products, setProducts] = useState(productsData);

  return (
    <>
      <div>
        <img src={process.env.PUBLIC_URL + "bg.png"} width="100%" />
      </div>
      <div className="product-list">
        {products.map((element) => {
          return <Product element={element} key={element.id} />;
        })}
      </div>
    </>
  );
}

function Product(props) {
  return (
    <div className="product">
      <div className="product-img">상품 사진</div>
      <div>{props.element.title}</div>
      <div>{props.element.content}</div>
      <div>{props.element.price}</div>
    </div>
  );
}

export default App;