1
const Home = () => {
2
  return <h1>Home</h1>;
3
};
4
export default Home;

1
const Products = () => {
2
  return <h1>Products</h1>;
3
};
4
export default Products;

1
import React from 'react';
2
import ReactDOM from 'react-dom/client';
3
import { createBrowserRouter, RouterProvider } from 'react-router';
4
import Home from './pages/Home';
5
import Products from './pages/Products';
6

7
const router = createBrowserRouter([
8
  {
9
    path: '/',
10
    element: <Home />,
11
  },
12
  {
13
    path: '/products',
14
    element: <Products />,
15
  },
16
]);
17

18
ReactDOM.createRoot(document.getElementById('root')).render(
19
  <RouterProvider router={router} />
20
);

1
import { Link } from 'react-router';
2

3
const Home = () => {
4
  return (
5
    <div>
6
      <h1>Home</h1>
7
      <Link to="/products">Products 페이지로 이동</Link>
8
    </div>
9
  );
10
};
11
export default Home;

1
import { Outlet, Link } from 'react-router';
2

3
const RootLayout = () => {
4
  return (
5
    <>
6
      <nav>
7
        <Link to="/">Home</Link>{' '}
8
        <Link to="/products">Products</Link>
9
      </nav>
10
      <Outlet />
11
    </>
12
  );
13
};
14
export default RootLayout;

1
import RootLayout from './pages/RootLayout';
2

3
const router = createBrowserRouter([
4
  {
5
    path: '/',
6
    element: <RootLayout />,
7
    children: [
8
      { path: '',         element: <Home /> },
9
      { path: 'products', element: <Products /> },
10
    ],
11
  },
12
]);

1
import { Link } from 'react-router';
2

3
const ErrorPage = () => {
4
  return (
5
    <div>
6
      <h1>404 Error</h1>
7
      <p>페이지를 찾을 수 없습니다.</p>
8
      <Link to="/">홈으로 돌아가기</Link>
9
    </div>
10
  );
11
};
12
export default ErrorPage;

1
import ErrorPage from './pages/Error';
2

3
const router = createBrowserRouter([
4
  {
5
    path: '/',
6
    element: <RootLayout />,
7
    errorElement: <ErrorPage />,
8
    children: [
9
      { path: '',         element: <Home /> },
10
      { path: 'products', element: <Products /> },
11
    ],
12
  },
13
]);

1
import { Link, useNavigate } from 'react-router';
2

3
const Home = () => {
4
  const navigate = useNavigate();
5

6
  const handleClick = () => {
7
    navigate('/products');
8
  };
9

10
  return (
11
    <div>
12
      <h1>Home</h1>
13
      <button onClick={handleClick}>Products 보러 가기</button>
14
      <Link to="/products">링크로 이동</Link>
15
    </div>
16
  );
17
};
18
export default Home;

1
import { useParams } from 'react-router';
2

3
const ProductDetail = () => {
4
  console.log(useParams()); // { id: '1' } 형태로 출력된다
5

6
  const { id } = useParams();
7

8
  return (
9
    <div>
10
      <h1>ProductDetail</h1>
11
      <p>상품 ID: {id}</p>
12
    </div>
13
  );
14
};
15
export default ProductDetail;

1
import ProductDetail from './pages/ProductDetail';
2

3
const router = createBrowserRouter([
4
  {
5
    path: '/',
6
    element: <RootLayout />,
7
    errorElement: <ErrorPage />,
8
    children: [
9
      { path: '',              element: <Home /> },
10
      { path: 'products',     element: <Products /> },
11
      { path: 'products/:id', element: <ProductDetail /> },
12
    ],
13
  },
14
]);

1
import { Link } from 'react-router';
2

3
const PRODUCTS = [
4
  { id: '1', title: '상품1' },
5
  { id: '2', title: '상품2' },
6
  { id: '3', title: '상품3' },
7
];
8

9
const Products = () => {
10
  return (
11
    <>
12
      <h1>Products</h1>
13
      <ul>
14
        {PRODUCTS.map((item) => (
15
          <li key={item.id}>
16
            <Link to={`/products/${item.id}`}>{item.title}</Link>
17
          </li>
18
        ))}
19
      </ul>
20
    </>
21
  );
22
};
23
export default Products;

1
import { useParams, Link } from 'react-router';
2

3
const ProductDetail = () => {
4
  const { id } = useParams();
5

6
  return (
7
    <div>
8
      <h1>ProductDetail</h1>
9
      <p>상품 ID: {id}</p>
10
      <Link to=".." relative="path">← 목록으로 돌아가기</Link>
11
    </div>
12
  );
13
};
14
export default ProductDetail;

1
const router = createBrowserRouter([
2
  {
3
    path: '/',
4
    element: <RootLayout />,
5
    errorElement: <ErrorPage />,
6
    children: [
7
      { index: true,           element: <Home /> },
8
      { path: 'products',      element: <Products /> },
9
      { path: 'products/:id',  element: <ProductDetail /> },
10
    ],
11
  },
12
]);

1
import { useSearchParams } from 'react-router';
2

3
const Products = () => {
4
  const [searchParams, setSearchParams] = useSearchParams();
5

6
  // /products?category=shoes 일 때
7
  const category = searchParams.get('category'); // 'shoes'
8
  const sort = searchParams.get('sort');         // null (없으면 null)
9

10
  return (
11
    <div>
12
      <h1>Products</h1>
13
      <p>카테고리: {category ?? '전체'}</p>
14
      <p>정렬: {sort ?? '기본'}</p>
15
    </div>
16
  );
17
};

1
import { useSearchParams } from 'react-router';
2

3
const Products = () => {
4
  const [searchParams, setSearchParams] = useSearchParams();
5
  const category = searchParams.get('category');
6

7
  return (
8
    <div>
9
      <h1>Products</h1>
10
      <p>현재 카테고리: {category ?? '전체'}</p>
11

12
      <button onClick={() => setSearchParams({ category: 'shoes' })}>
13
        신발
14
      </button>
15
      <button onClick={() => setSearchParams({ category: 'bags' })}>
16
        가방
17
      </button>
18
      <button onClick={() => setSearchParams({})}>
19
        전체 보기
20
      </button>
21
    </div>
22
  );
23
};

1
const Products = () => {
2
  const [searchParams, setSearchParams] = useSearchParams();
3

4
  const category = searchParams.get('category');
5
  const sort = searchParams.get('sort');
6

7
  const changeSort = (value) => {
8
    setSearchParams((prev) => {
9
      prev.set('sort', value);
10
      return prev;
11
    });
12
  };
13

14
  return (
15
    <div>
16
      <h1>Products</h1>
17
      <p>카테고리: {category ?? '전체'} / 정렬: {sort ?? '기본'}</p>
18

19
      <button onClick={() => setSearchParams({ category: 'shoes', sort: sort || '' })}>
20
        신발
21
      </button>
22
      <button onClick={() => changeSort('price')}>가격순</button>
23
      <button onClick={() => changeSort('name')}>이름순</button>
24
    </div>
25
  );
26
};

1
import { useSearchParams, Link } from 'react-router';
2

3
const PRODUCTS = [
4
  { id: '1', title: '운동화', category: 'shoes' },
5
  { id: '2', title: '구두',   category: 'shoes' },
6
  { id: '3', title: '백팩',   category: 'bags' },
7
  { id: '4', title: '토트백', category: 'bags' },
8
  { id: '5', title: '볼캡',   category: 'hats' },
9
];
10

11
const Products = () => {
12
  const [searchParams, setSearchParams] = useSearchParams();
13

14
  const search   = searchParams.get('search')   || '';
15
  const category = searchParams.get('category') || '';
16

17
  const filtered = PRODUCTS.filter((item) => {
18
    const matchSearch   = item.title.includes(search);
19
    const matchCategory = category ? item.category === category : true;
20
    return matchSearch && matchCategory;
21
  });
22

23
  return (
24
    <div>
25
      <h1>Products</h1>
26

27
      <input
28
        type="text"
29
        placeholder="검색..."
30
        value={search}
31
        onChange={(e) =>
32
          setSearchParams((prev) => {
33
            if (e.target.value) prev.set('search', e.target.value);
34
            else prev.delete('search');
35
            return prev;
36
          })
37
        }
38
      />
39

40
      <div>
41
        <button onClick={() => setSearchParams((prev) => { prev.delete('category'); return prev; })}>전체</button>
42
        <button onClick={() => setSearchParams((prev) => { prev.set('category', 'shoes'); return prev; })}>신발</button>
43
        <button onClick={() => setSearchParams((prev) => { prev.set('category', 'bags'); return prev; })}>가방</button>
44
        <button onClick={() => setSearchParams((prev) => { prev.set('category', 'hats'); return prev; })}>모자</button>
45
      </div>
46

47
      <ul>
48
        {filtered.map((item) => (
49
          <li key={item.id}>
50
            <Link to={`/products/${item.id}`}>{item.title}</Link>
51
          </li>
52
        ))}
53
      </ul>
54
      {filtered.length === 0 && <p>결과가 없습니다.</p>}
55
    </div>
56
  );
57
};
58
export default Products;

1
import React from 'react';
2
import ReactDOM from 'react-dom/client';
3
import { createBrowserRouter, RouterProvider } from 'react-router';
4
import RootLayout    from './pages/RootLayout';
5
import Home          from './pages/Home';
6
import Products      from './pages/Products';
7
import ProductDetail from './pages/ProductDetail';
8
import ErrorPage     from './pages/Error';
9

10
const router = createBrowserRouter([
11
  {
12
    path: '/',
13
    element: <RootLayout />,
14
    errorElement: <ErrorPage />,
15
    children: [
16
      { index: true,           element: <Home /> },
17
      { path: 'products',      element: <Products /> },
18
      { path: 'products/:id',  element: <ProductDetail /> },
19
    ],
20
  },
21
]);
22

23
ReactDOM.createRoot(document.getElementById('root')).render(
24
  <RouterProvider router={router} />
25
);

1
import { Outlet, Link } from 'react-router';
2

3
const RootLayout = () => {
4
  return (
5
    <>
6
      <nav>
7
        <Link to="/">Home</Link>{' '}
8
        <Link to="/products">Products</Link>
9
      </nav>
10
      <Outlet />
11
    </>
12
  );
13
};
14
export default RootLayout;

1
import { useNavigate } from 'react-router';
2

3
const Home = () => {
4
  const navigate = useNavigate();
5
  return (
6
    <div>
7
      <h1>Home</h1>
8
      <button onClick={() => navigate('/products')}>Products 보러 가기</button>
9
    </div>
10
  );
11
};
12
export default Home;

1
import { Link } from 'react-router';
2

3
const PRODUCTS = [
4
  { id: '1', title: '상품1' },
5
  { id: '2', title: '상품2' },
6
  { id: '3', title: '상품3' },
7
];
8

9
const Products = () => {
10
  return (
11
    <>
12
      <h1>Products</h1>
13
      <ul>
14
        {PRODUCTS.map((item) => (
15
          <li key={item.id}>
16
            <Link to={`/products/${item.id}`}>{item.title}</Link>
17
          </li>
18
        ))}
19
      </ul>
20
    </>
21
  );
22
};
23
export default Products;

1
import { useParams, Link } from 'react-router';
2

3
const ProductDetail = () => {
4
  const { id } = useParams();
5
  return (
6
    <div>
7
      <h1>ProductDetail</h1>
8
      <p>상품 ID: {id}</p>
9
      <Link to=".." relative="path">← 목록으로 돌아가기</Link>
10
    </div>
11
  );
12
};
13
export default ProductDetail;

1
import { Link } from 'react-router';
2

3
const ErrorPage = () => {
4
  return (
5
    <div>
6
      <h1>404 Error</h1>
7
      <p>페이지를 찾을 수 없습니다.</p>
8
      <Link to="/">홈으로 돌아가기</Link>
9
    </div>
10
  );
11
};
12
export default ErrorPage;