React Router v6의 학습 Part2

동적 라우팅 설정

이번에는 동적 경로를 총결하였다.
이번에 우리는'/'에서'/1'과'/2'등 링크의 데이터를 통해 URL을 바꾸는 메커니즘을 고려했다.
User.ts

const users = [
  {
    id: 1,
    name: "Leanne Graham",
    username: "Bret",
    email: "[email protected]",
    address: {
      street: "Kulas Light",
      suite: "Apt. 556",
      city: "Gwenborough",
      zipcode: "92998-3874",
      geo: {
        lat: "-37.3159",
        lng: "81.1496",
      },
    },
    phone: "1-770-736-8031 x56442",
    website: "hildegard.org",
    company: {
      name: "Romaguera-Crona",
      catchPhrase: "Multi-layered client-server neural-net",
      bs: "harness real-time e-markets",
    },
  },
  {
    id: 2,
    name: "Ervin Howell",
    username: "Antonette",
    email: "[email protected]",
    address: {
      street: "Victor Plains",
      suite: "Suite 879",
      city: "Wisokyburgh",
      zipcode: "90566-7771",
      geo: {
        lat: "-43.9509",
        lng: "-34.4618",
      },
    },
    phone: "010-692-6593 x09125",
    website: "anastasia.net",
    company: {
      name: "Deckow-Crist",
      catchPhrase: "Proactive didactic contingency",
      bs: "synergize scalable supply-chains",
    },
  },
  {
    id: 3,
    name: "Clementine Bauch",
    username: "Samantha",
    email: "[email protected]",
    address: {
      street: "Douglas Extension",
      suite: "Suite 847",
      city: "McKenziehaven",
      zipcode: "59590-4157",
      geo: {
        lat: "-68.6102",
        lng: "-47.0653",
      },
    },
    phone: "1-463-123-4447",
    website: "ramiro.info",
    company: {
      name: "Romaguera-Jacobson",
      catchPhrase: "Face to face bifurcated interface",
      bs: "e-enable strategic applications",
    },
  },
];

export const getUsers = () => {
  return users;
};

견본으로 세 개의 사용자 정보를 포함하는 배열을 사용하고자 합니다.
페이지 1 구성 요소에서 라우팅이 이루어진다고 가정하기 때문에
Page1.tsx

import React, { VFC } from "react";
import { Link, Outlet, Route, Routes } from "react-router-dom";
import { getUsers } from "./User";

type PROPS = {
  subtitle: string;
};
export const Page1: VFC<PROPS> = (props) => {
  const users = getUsers();
  return (
    <div>
      <h1>Page1です。</h1>
      <p>{props.subtitle}</p>
      <Outlet />
      <nav
        style={{
          borderRight: "solid 1px",
          padding: "1rem",
        }}
      >
        {users.map((user) => (
          <Link
            style={{ display: "block", margin: "1rem 0" }}
            to={`/${user.id}`}
            key={user.id}
          >
            {user.name}
          </Link>
        ))}
      </nav>
    </div>
  );
};

이렇게 하면 사용자의 이름을 링크로 하고 맵 순서로 출력합니다.
to에서 {/${user.id}} 을 미리 설정합니다.여기 있다, 힐.name이면/name도 가능합니다.
Page1.tsx

import { Page1 } from "./Page1";
import { BrowserRouter, Route, Routes, useNavigate } from "react-router-dom";
import { Page3 } from "./Page3";
import { Page2 } from "./Page2";
import { NotFound } from "./NotFound";
import { Link } from "react-router-dom";
import { Page4 } from "./Page4";
import { SingleUser } from "./SingleUser";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Page1 subtitle="Hello" />}>
          <Route path=":userId" element={<SingleUser />} />
        </Route>
        <Route path="/page2" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />}>
          <Route path="page4" element={<Page4 />} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

동적 경로의 경우 path = ":useId"처럼 임의의 이름이 있는 경로를 미리 설정합니다.
userId를 어디에서 사용할 수 있는지 말하려면SingleUser 구성 요소에서useParams를 사용하십시오
이 페이지의 "/"뒷부분을 꺼낼 수 있습니다.(1"/1"의 경우 1)
SingleUser.tsx

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

export const SingleUser = () => {
  const { userId } = useParams();
  return (
    <div>
      <h1>{userId}</h1>
    </div>
  );
};

이 userId를 활용하면 API 두드리기 등에 효과가 있습니다.

useNavigate 정보

조금 정리하면...

const navigate = useNavigate();
navigate('page2')

는 이런 형식으로 온클릭 등과 조합하여 처리한 후 페이지를 이동하기에 적합하다.
useNavigate에 관해서는 실제 사용할 시기가 왔다면 다시 한 번 잘 정리하고 싶습니다.