intro

Accessing URL parameters and dynamic parameters of a route

 <Route path="/category4/page2" element={<Category4Page2 />} />

path="/category4/page2" 와 같이 정적 경로 구현외에

 <Route path=":slug" element={<Page3 />} />

":slug" 와 같이 동적 파라미터 경로를 설정 하는 방법에 대해 알아 보자.

touch ./src/pages/Category4/Category4Page3.tsx

@/pages/Category4/Page3.tsx

import React from "react";
import { useLocation, useParams } from "react-router-dom";

const Category4Page3 = () => {
  const location = useLocation();
  const { slug } = useParams(); // hook을 이용하여 slug값을 받는다.

  return (
    <React.Fragment>
      <span>This page : {location.pathname}</span>
      <div>this is dynamic {slug} </div> {/* 슬러그 값을 출력한다. */}
    </React.Fragment>
  );
};

export default Category4Page3;

위와 같이 dinamic parameter path를 잡아 준다.

@/pages/Category1/index.tsx

import PageLayout from "@/components/PageLayout";
import React from "react";

import { Link, Outlet, useLocation } from "react-router-dom";

const Category4 = () => {
  const location = useLocation();
  return (
    <PageLayout>
      <nav className="bg-slate-200 space-x-4 p-2 font-bold text-black">
        <Link to={`/category4/page1`}>Page1</Link>
        <Link to={`/category4/page2`}>Page2</Link>
        <Link to="/category4/page3">Slug page3</Link>
        <Link to="/category4/page4">Slug page4</Link>
      </nav>
      <h1 className="text-2xl font-bold">🧠 {location.pathname}</h1>
      <p className="mt-2 text-gray-600">이 페이지는 🧠 {location.pathname} 페이지 템플릿입니다.</p>
      <Outlet />
    </PageLayout>
  );
};

export default Category4;

@/App.tsx

...
import React from "react";
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";

import GNB from "@/components/Navigations/GNB";
import Category2 from "@/pages/Category2";
import Category3 from "@/pages/Category3";
import Dashboard from "@/pages/Dashboard";
import NotFound from "@/pages/NotFound";
import Category4 from "./pages/Category4";
import Category4Page1 from "./pages/Category4/Category4Page1";
import Category4Page2 from "./pages/Category4/Category4Page2";
import Category4Page3 from "./pages/Category4/Category4Page3";

function App() {
  return (
    <div className="p-6">
      <Router>
        <GNB />
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/category2" element={<Category2 />} />
          <Route path="/category3" element={<Category3 />} />
          <Route path="/category4" element={<Category4 />}>
            {/* /category1 경로 */}
            <Route index element={<Category4Page1 />} />
            {/* /category1/page1 경로 */}
            <Route path="/category4/page1" element={<Category4Page1 />} />
            <Route path="/category4/page2" element={<Category4Page2 />} />
            <Route path="/category4/:slug" element={<Category4Page3 />} />
          </Route>
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;


...

Slug page3, Slug Page4 메뉴 이동 값을 확인한다.