React Router

설치

• yarn add react-router-dom

사용법

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

• 먼저 createBrowserRouter, RouterProvider import 한다.

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <NotFound />,
    children: [
      {
        index: true,
        element: <Home />,
      }, 
      {
        path: "/videos",
        element: <Videos />,
      },
      {
        path: "/videos/:videoId",
        element: <VideoDetail />,
      },
    ],
  },
]);

• path는 경로를 설정하는 것
• element는 이동할 곳
• errorElement는 경로가 잘못입력 시 에러를 보여줄 곳으로 설정 가능.
• children을 사용하면 자식경로들을 만들 수 있다.
• index는 최상위 경로 기본경로 설정
• path: "/videos/:videoId"는 /:상세 예를 들어 videoId에 값이 들어오면 <VideoDetail /> 컴포넌트를 보여준다.

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

• RouterProvider로 위에서 만들었던 router를 설정해줘야 한다.

Link

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

export default function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/videos">Videos</Link>
    </nav>
  );
}

• Navbar라는 컴포넌트를 만들고 안에다가 링크로 Home과 Videos를 설정해 준다.
• Link 란 a 태그와 비슷한 느낌인데 router에서 사용가능 하다.
• Link to ←에 경로를 찾아서 보여준다.

useNavigate

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

export default function Videos() {
  const [text, setText] = useState("");
  const navigate = useNavigate();
  const handleSubmit = (e) => {
    e.preventDefault();
    setText("");
    navigate(`/videos/${text}`);
  };
  const handleChange = (e) => {
    setText(e.target.value);
  };
  return (
    <div>
      Videos
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="video id:"
          value={text}
          onChange={handleChange}
        />
      </form>
    </div>
  );
}

• router 경로를 이동시키는 방법은 두 가지가 있다. 위에서 썼던 Link가 있고 마지막 하나는 useNavigate이다.
• useNavigate는 경로를 작성하면 그 경로 이동시켜 준다.
• -1이라고 작성하면 뒤로 가기이다.

import React from "react";
import { formatAgo } from "../util/date";
import { useNavigate } from "react-router-dom";

export default function VideoCard({ video }) {
  const { thumbnails, title, channelTitle, publishedAt } = video.snippet;
  const navigate = useNavigate();

  return (
    <li
      className=""
      onClick={() => {
        navigate(`videos/watch/${video.id}`, { state: { video } });
      }}
    >
      <img className="w-full" src={thumbnails.medium.url} alt={title} />
      <div>
        <p className="font-semibold my-2 line-clamp-2">{title}</p>
        <p className="text-sm opacity-80">{channelTitle}</p>
        <p className="text-sm opacity-80">{formatAgo(publishedAt, "ko")}</p>
      </div>
    </li>
  );
}

• navigate 두 번째 인자에 부가적인 객체를 전달할 경우에는 객체를 전달할 수 있다.

useLocation

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

export default function VideosDetail() {
  const {
    state: { video },
  } = useLocation();
  console.log(video);
  return <div>VideosDetail</div>;
}

• useLocation을 사용해서 URL 정보를 가져올 수 있다.

• log에 찍어보면 위에 같이 값들이 나오는데 navigate에서 두 번째 인자에 지정한 state 값도 담겨있는 걸 볼 수 있다.

useParams

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

export default function VideoDetail() {
  const { videoId } = useParams();
  return <div>VideoDetail {videoId}</div>;
}

• useParams 은 path: "/videos/:videoId" videoId를 받아올 때 쓰는 router에서 쓸 수 있는 Hook이다.

Outlet

const router = createBrowserRouter([
  {
    path: "/",
    element: <Coins />,
    errorElement: <NotFound />,
  },
  {
    path: "/:coinId",
    element: <Coin />,
    children: [
      {
        path: "price",
        element: <Price />,
      },
      {
        path: "chart",
        element: <Chart />,
      },
    ],
  },
]);

• path 안에 children을 사용해 중첩 라우팅이 가능하다.
• children path를 지정할 때에는 / 빼줘야 한다.

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

export default function Root() {
  return (
    <div>
      <Navbar />
      <Outlet />
    </div>
  );
}

• Outlet을 import 하고 사용하면 자식 라우트의 엘리먼트가 있는 경우 렌더링 한다.
• Outlet은 부모 경로 요소에서 자식 경로 요소를 렌더링 하는 데 사용해야 한다.
• 이를 통해 하위 경로가 렌더링 될 때 중첩된 UI를 표시할 수 있고, 부모 라우트가 정확히 일치하면 자식 인덱스 라우트를 렌더링 하거나 인덱스 라우트가 없으면 아무것도 렌더링 하지 않는다.
• Outlet 은 창고 위에 코드처럼 사용하게 되면 Navbar 컴포넌트는 그대로 있으면서 아래 내용들만 렌더링 된다.