리액트 라우터 URL 파라미터, useParams 사용하기

만약 /제품/제품명 으로 접속하면 해당 제품에 대한 정보를 띄우고 싶다면?

function Products() {
  return (
    <>
    <section>
    <h1>The Products Page</h1>
    <ul>
      <li>A Carpet</li>
      <li>A Book</li>
      <li>A Glasses</li>
    </ul>
    </section>
    </>
  )
}

export default Products

import { Route, Routes } from "react-router-dom";
import ProductDetail from "./pages/ProductDetail";

function App() {
  return (
    <div>
      <MainHeader></MainHeader>
      <main>
        <Routes>
          <Route path="/product-detail/:productId" element ={<ProductDetail/>}/> 
        </Routes> // 도메인주소.com/product-detail/아무거나 붙이면 해당 product-detail에 맞는 요소들을 
                    // 보여줌 작명은 상관없지만 꼭 /: 이 있어야함.
      </main>
    </div>
  );
}

export default App;

아무거나 입력해서 들어갔는데도 ProductDetail 컴포넌트 안의 내용을 띄어주었다.

🔍 useParams 사용하기

각각 제품에 맞는 해당 제품의 디테일 페이지를 띄우고 싶다면 useParams를 사용한다.

useParams는 상수에 저장할 수 있는 객체를 반환하고, 그 객체는 키와 값을 갖는다.

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

function ProductDetail() {

const params = useParams();

console.log(params);

  return <section>ProductDetail</section>
      <p>{params.productId}</p>
}

export default ProductDetail;

아까 위에 접속할때 쳤던 문자열이 나왔다.

저 productId는 App 컴포넌트에서 파라미터를 등록할때 /: 뒤에 작성했던 문자다.

import { Link } from "react-router-dom"


function Products() {
  return (
    <>
    <section>
    <h1>The Products Page</h1>
    <ul>
      <li><Link to="/products/p1">A Carpet</Link></li> // 클릭하면 /products/p1페이지로 이동
      <li><Link to="/products/p2">A Book</Link></li> // 클릭하면 /products/p2 페이지로 이동
      <li><Link to="/products/p3">A Glasses</Link></li> // 클릭하면 /products/p3 페이지로 이동
    </ul>
    </section>
    </>
  )
}

export default Products