리액트 라우터 3 : URL 파라미터로 상세페이지 100개 만들기

INDEX

상세페이지에 상품명 표기합시다
비슷한 페이지 여러개 필요하면 url 파라미터
페이지마다 똑같은 내용 보이는게 싫으면
응용문제

상세페이지에 상품명 표기합시다

import './App.css';
import { Navbar, Container, Nav } from 'react-bootstrap';
import { useState } from 'react';
import data from './data.js';
import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom';
import Detail from './route/Detail';

function App() {
  let [shoes] = useState(data);
  let navigate = useNavigate();

  return (
    <div className='App'>
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="/">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link href="/cart">Cart</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      
      <Routes>
        <Route path="/" element={
          <>
            <div className='main-bg'></div>
            <div className="container">
              <div className="row">
                {
                  shoes.map((a, i)=>{
                    return (
                      <Product key={i} **shoes={shoes[i]}** i={i} />
                    )
                  })
                }
              </div>
            </div>
            <button onClick={() => {
              navigate('/detail')
            }}>이동버튼</button>
          </>
        }/>
        <Route path="/detail" element={<Detail shoes={shoes}/>}/>
        <Route path="*" element={<div>잘못된 접속입니다.</div>}/>
      </Routes>
    </div>
  );
}

function Product(props) {
  return (
    <div className="col-md-4">
      <img src={process.env.PUBLIC_URL + '/img/shoes'+(props.i+1)+'.jpg'} width="80%" />
      <h4>{props.shoes.title}</h4>
      <p>{props.shoes.content}</p>
      <p>{props.shoes.price}</p>
    </div>
  )
}

export default App;

function Detail(**props**) {
    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">**{props.shoes[0].title}**</h4>
                    <p>**{props.shoes[0].conent}**</p>
                    <p>**{props.shoes[0].price}**</p>
                    <button className="btn btn-danger">주문하기</button> 
                </div>
            </div>
        </div> 
    );
}

export default Detail;

import './App.css';
import { Navbar, Container, Nav } from 'react-bootstrap';
import { useState } from 'react';
import data from './data.js';
import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom';
import Detail from './route/Detail';

function App() {
  let [shoes] = useState(data);
  let navigate = useNavigate();

  return (
    <div className='App'>
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="/">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link href="/cart">Cart</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      
      <Routes>
        <Route path="/" element={
          <>
            <div className='main-bg'></div>
            <div className="container">
              <div className="row">
                {
                  shoes.map((a, i)=>{
                    return (
                      <Product key={i} shoes={shoes[i]} i={i} />
                    )
                  })
                }
              </div>
            </div>
            <button onClick={() => {
              navigate('/detail')
            }}>이동버튼</button>
          </>
        }/>
        <Route path="/detail/**:id**" element={<Detail shoes={shoes}/>}/>
        <Route path="*" element={<div>잘못된 접속입니다.</div>}/>
      </Routes>
    </div>
  );
}

function Product(props) {
  return (
    <div className="col-md-4">
      <img src={process.env.PUBLIC_URL + '/img/shoes'+(props.i+1)+'.jpg'} width="80%" />
      <h4>{props.shoes.title}</h4>
      <p>{props.shoes.content}</p>
      <p>{props.shoes.price}</p>
    </div>
  )
}

export default App;

이런 식으로 주소창에 아무거나 뒤에 입력하면 접속이 됨

비슷한 페이지 여러개 필요하면 url 파라미터 + 페이지마다 똑같은 내용 보이는게 싫으면

나는 navigate 함수를 이용해 사용했다.

import './App.css';
import { Navbar, Container, Nav } from 'react-bootstrap';
import { useState } from 'react';
import data from './data.js';
import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom';
import Detail from './route/Detail';

function App() {
  let [shoes] = useState(data);

  return (
    <div className='App'>
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="/">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link href="/cart">Cart</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      
      <Routes>
        <Route path="/" element={
          <>
            <div className='main-bg'></div>
            <div className="container">
              <div className="row">
                {
                  shoes.map((a, i)=>{
                    return (
                      <Product key={i} shoes={shoes[i]} i={i} />
                    )
                  })
                }
              </div>
            </div>
          </>
        }/>
        <Route path="/detail/:id" element={<Detail shoes={shoes}/>}/>
        <Route path="*" element={<div>잘못된 접속입니다.</div>}/>
      </Routes>
    </div>
  );
}

function Product(props) {
  let navigate = useNavigate();

  return (
    <div className="col-md-4" onClick={() => {
      navigate('**/detail/'+(props.i)**)
    }}>
      <img src={process.env.PUBLIC_URL + '/img/shoes'+(props.i+1)+'.jpg'} width="80%" />
      <h4>{props.shoes.title}</h4>
      <p>{props.shoes.content}</p>
      <p>{props.shoes.price}</p>
    </div>
  )
}

export default App;

응용문제 - 정렬했을 때의 문제

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

function Detail(props) {
    let {id} = useParams();
    **let find = props.shoes.find((x) => {
        return x.id == id;
    })**

    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                    <img src={process.env.PUBLIC_URL + '/img/shoes'+(Number(id)+1)+'.jpg'} width="100%" />
                </div>
                <div className="col-md-6">
                    <h4 className="pt-5">{props.shoes[id].title}</h4>
                    <p>{props.shoes[id].conent}</p>
                    <p>{props.shoes[id].price}원</p>
                    <button className="btn btn-danger">주문하기</button> 
                </div>
            </div>
        </div> 
    );
}

export default Detail;

Array.prototype.find() - JavaScript | MDN

참고 자료