React Router Dom - (2) Link로 페이지 이동

 

이번 포스트에서는 리액트 라우터 돔 Link로 페이지 이동하는 방법에 대해 알아보겠습니다

 

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import HomePage from "./pages/Home";
import ProductPage from "./pages/Product";

const router = createBrowserRouter([
  { path: "/", element: <HomePage /> },
  { path: "/products", element: <ProductPage /> },
]);

function App() {
  return <RouterProvider router={router} />;
}

 

저번 포스트에서 기본적인 라우팅을 해봤습니다

 

HomePage에서 ProductPage로 Link를 이용해 페이지 이동기능을 구현해보겠습니다

 

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

function HomePage() {
  return (
    <>
      <h1>My Home Page</h1>
      <p>
        <Link to='/products'>Go to the list of products.</Link>
      </p>
    </>
  );
}

export default HomePage;

 

Link를 import한 뒤, 기존에 HTML에서 <a> 태그를 썼던 것처럼 이동할 요소를 <Link>로 감싸주면 됩니다.

그리고 to 속성에 이동할 URL을 지정해주면 끝입니다

 

 

products 페이지로 이동하지만, 페이지 전체가 새로고침되지 않고 매끄럽게 전환되는 걸 확인할 수 있습니다.