[React] React Router v6 살펴보기

강의 내용 : 강의 링크
#4.0 ~ #4.8

 

○ browserRouter

import { BrowserRouter } from "react-router-dom";
import Header from "./component/Header";
import { Routes, Route } from "react-router-dom";
import Home from "./screen/Home";
import About from "./screen/About";

function Router() {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

• App.js에서 Router import해서 사용

 

○ createBrowserRouter

   ※ createBrowserRouter : Router를 JavaScript Object(array) 형식으로 표현

import { BrowserRouter } from "react-router-dom";
import Header from "./component/Header";
import { createBrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./screen/Home";
import About from "./screen/About";
import Root from "./Root";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "",
        element: <Home />,
      },
      {
        path: "about",
        element: <About />,
      },
    ],
  },
]);
export default router;

• <Outlet /> 컴포넌트를 사용하여 하위 라우트를 렌더링

---

○ errorElement

   ※ errorElement : 컴포넌트에 에러가 발생해서 충돌하거나 컴포넌트의 위치를 찾지 못할 때 사용

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "",
        element: <Home />,
        errorElement: <ErrorComponent />,
      },
      {
        path: "about",
        element: <About />,
      },
    ],
    errorElement: <NotFound />,
  },
]);

• Root element path에 에러를 추가할 수 있다.

---

○ useNavigate

   ※ useNavigate : user를 어딘가로 보내는 기능

    * 다른 페이지로 이동시키는 방법 → Link(사용자가 클릭을 해야함)

       ⇒ 클릭 없이 다른페이지로 이동시키려면 useNavigate를 사용해야함

function Header() {
  const navigate = useNavigate();
  const onAboutClick = () => {
    navigate("/about");
  };
  return (
    <h1>
      <ul>
        <li>
          <Link to={"/"}>Home</Link>
        </li>
        <li>
          <button onClick={onAboutClick}>About</button>
        </li>
      </ul>
    </h1>
  );
}

---

○ useParams

   ※ useParams : URL 경로에 포함된 동적 파라미터를 읽어온다.

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "",
        element: <Home />,
        errorElement: <ErrorComponent />,
      },
      {
        path: "about",
        element: <About />,
      },
      {
        path: "users/:userId",
        element: <User />,
      },
    ],
    errorElement: <NotFound />,
  },
]);

• 먼저, 동적 파라미터를 불러오기 위한 경로를 생성하자!
• 왜 children을 쓰지 않고 한번에 users/:userId로 작성했지?
  → /users로 가서 뭘 볼 수 있다? 그러면 children을 써야하지만 /users가서 뭘 볼 수 있는게 없으면 그냥 이렇게 쓰면됨

function User() {
  const { userId } = useParams();
  return (
    <h1>
      User with it {userId} is named: {users[Number(userId) - 1].name}
    </h1>
  );
}

---

○ Outlet

   ※ outlet : Route의 자식들을 render함

 

- router.tsx

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "",
        element: <Home />,
        errorElement: <ErrorComponent />,
      },
      {
        path: "about",
        element: <About />,
      },
      {
        path: "users/:userId",
        element: <User />,
        children: [
          {
            path: "followers",
            element: <Followers />,
          },
          {
            path: "following",
            element: <Followers />,
          },
        ],
      },
    ],
    errorElement: <NotFound />,
  },
]);

• User 아래로 자식 element 생성

- User.tsx

function User() {
  const { userId } = useParams();
  return (
    <div>
      <h1>
        User with it {userId} is named: {users[Number(userId) - 1].name}
      </h1>
      <hr />
      <Link to="followers">See followers</Link>
      <Outlet
        context={{
          nameOfMyUser: users[Number(userId) - 1].name,
        }}
      />
    </div>
  );
}

• 아무위치에 <Outlet /> 추가하면 User의 자식인 Followers render됨
• Outlet에 prop를 전달하고 싶은 경우, Outlet에 prop 추가

- Followers.tsx

interface IFollosersContext {
  nameOfMyUser: string;
}

function Followers() {
  const { nameOfMyUser } = useOutletContext<IFollosersContext>();
  return <h1>Here are {nameOfMyUser}의 followers</h1>;
}

• useOutletContext로 prop 받는다.

---

○ useSearchParams

   ※ useSearchParams : 검색할 때 사용하는 파라미터

function Home() {
  const [readSearchParams, setSearchParams] = useSearchParams();
  console.log(readSearchParams.has("day"));
  console.log(readSearchParams.get("tomorrow"));
  setTimeout(() => {
    setSearchParams({
      day: "today",
      tomorrow: "123",
    });
  });
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`}>{user.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}