[TIL] React-Router-Dom

React-Router-Dom

• 리액트에서 라우팅을 하기 위해 사용하는 라이브러리

Routing

• 우리가 주소창에 url을 입력했을 때 네트워크 서버상에 해당하는 url의 페이지 전체의 데이터를 요청헙니다. 서버에서 요청된 url에 해당하는 데이터를 전달해 줍니다.

CSR(client side routing)

• url을 입력했을 때 서버상에 전체적인 데이터를 요청하는 것이 아니라 어플리케이션 내에서 업데이트가 필요한 부분만 동적으로 데이터를 요청합니다. 따라서 완전히 새로운 html이 업데이트 되는 것이 아니라 각각 해당 페이지에서 필요한 데이터를 fetch(네트워크 통신)을 이용해서 필요한 부분만 업데이트 합니다.

기본 사용

import React from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

// 라우터를 만들때 createBrowserRouter로 만듬
// 라우터의 각각 경로에 대해서 설명할 수 있는 배열을 전달해준다.
const router = createBrowserRouter([
  {
    path: "/", // url의 경로
    element: <p>Home</p>, // 보여줄 컴포넌트
    errorElement: <p>Not Found</p>, // url의 경로가 잘못되었을 때 보여줄 컴포넌트
  },
  {
    path: "/videos",
    element: <p>Videos</p>,
  },
]);

// router의 기능을 사용하기 위해서는 최상위 컴포넌트에서 RouterProvider컴포넌트를 리턴해줘야한다.
// props로 router의 값을 지정해준다. router의 값은 위에서 설정한 const router의 값이다.
export default function Router() {
  return <RouterProvider router={router} />;
}

Outlet

• 페이지 전체를 변경하는 것이 아니라 원하는 부분만 변경하기 위해서 사용합니다.

// index.js
import { createBrowserRouter , RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <NotFound />,
    // Outlet의 기능을 사용해서 nav바 밑에 두고 싶다면 children 속성의 배열 안에 보여주고 싶은 컴포넌트를 지정해주어야 한다.
    children: [
      { index: true, element: <Home /> }, // 기본적으로 보여줄 컴포넌트
      { path: "videos", element: <Videos /> },
    ],
  },
]);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

// app.js

import { Outlet } from "react-router-dom";
import SearchHeader from "./components/SearchHeader";

const queryClient = new QueryClient();

function App() {
  return (
    <>
      <SearchHeader />
      <Outlet />
    </>
  );
}

export default App;