Tanstack Route 동적(dynamic) 라우팅 사용법 및 가이드

src
├── ...
├── routes/
│   ├── posts/
│   │   ├── index.tsx
│   │   └── $postId.tsx // 동적 라우팅
│   └── ...

// posts 폴더 안에 있는 index.tsx 파일입니다.
import { createFileRoute } from "@tanstack/react-router";
 
export const Route = createFileRoute("/posts/")({
  component: RouteComponent,
});
 
function RouteComponent() {
  return "Hello /posts/!";
}

// posts 폴더 안에 있는 $postId.tsx 파일입니다.
import { createFileRoute } from "@tanstack/react-router";
 
export const Route = createFileRoute("/posts/$postId")({
  component: RouteComponent,
});
 
function RouteComponent() {
  return "Hello /posts/$postId!";
}

src
├── ...
├── routes/
│   ├── news/
│   │   └── $newsId/ // 동적 라우팅
│   │       └── index.tsx // 폴더 라우팅이면 반드시 있어야 합니다.
│   └── ...

src
├── ...
├── routes/
│   ├── news/
│   │   └── index.tsx // news 페이지의 메인 페이지
│   │   └── $newsId/
│   │       └── index.tsx // news 페이지의 동적 페이지
│   └── ...

import { createFileRoute, useParams } from "@tanstack/react-router";
 
export const Route = createFileRoute("/posts/$postId")({
  component: RouteComponent,
});
 
function RouteComponent() {
  const { postId } = useParams({ strict: false });
 
  return <h1>`Hello /posts/{postId}`</h1>;
}

//...
function RouteComponent() {
  const { postId } = Route.useParams();
 
  return <h1>`Hello /posts/{postId}`</h1>;
}

//...
function RouteComponent() {
  return (
    <div>
      <h1>Posts</h1>
      <p>Post Page</p>
      <Link to="/posts/$postId" params={{ postId: "1" }}>
        Post 1
      </Link>
    </div>
  );
}

//...
function RouteComponent() {
  return (
    <Link to="/posts/$postId" params={(prev) => ({ ...prev, postId: "2" })}>
      Post 2
    </Link>
  );
}

//...
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 
export const Route = createFileRoute("/posts/")({
  component: RouteComponent,
});
 
function RouteComponent() {
  const navigate = useNavigate({ from: "/posts" });
 
  return (
    <button
      onClick={() => {
        navigate({ to: "$postId", params: { postId: "1" } });
      }}
    >
      Post 1
    </button>
  );
}

//...
function RouteComponent() {
  const navigate = useNavigate();
 
  return (
    <button
      onClick={() =>
        navigate({ to: "/posts/$postId", params: { postId: "1" } })
      }
    >
      Post 1
    </button>
  );
}

//...
function RouteComponent() {
  return (
    <Link to="/posts" search={{ page: 1 }}>
      Search 1
    </Link>
  );
}

//...
function RouteComponent() {
  return (
    <Link to="/posts/$postId" params={{ postId: "1" }} search={{ page: 1 }}>
      Search 1
    </Link>
  );
}

//...
function RouteComponent() {
  const navigate = useNavigate();
 
  return (
    <button
      onClick={() => {
        navigate({
          to: "/posts",
          search: { page: 1 },
        });
      }}
    >
      Button Search 1
    </button>
  );
}

//...
function RouteComponent() {
  const { page } = Route.useSearch(); // 이렇게 사용하면 타입이 지정되지 않습니다.
 
  return <h1>`Search Page: {page}`</h1>;
}

interface PostSearchParams {
  page?: number;
}
 
export const Route = createFileRoute("/posts/")({
  validateSearch: (search: Record<string, unknown>): PostSearchParams => {
    return {
      page: search.page ? Number(search.page) : undefined,
    };
  },
  component: RouteComponent,
});
 
function RouteComponent() {
  const { page } = Route.useSearch();
 
  return <h1>`Search Page: {page}`</h1>;
}

// jsonplaceholder API getPosts function
 
export interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}
 
export const getPosts = async (): Promise<Post[]> => {
  try {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/posts?_limit=10`
    );
    if (!response.ok) {
      throw new Error("데이터를 불러오는 데 실패하였습니다.");
    }
 
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
    return [];
  }
};

import { createFileRoute } from "@tanstack/react-router";
import { getPosts } from "../../services/api";
 
export const Route = createFileRoute("/posts/")({
  loader: async () => await getPosts(),
  component: RouteComponent,
});

//... createFileRoute 부분
 
function RouteComponent() {
  const navigate = useNavigate();
  const posts = Route.useLoaderData();
 
  return (
    <div>
      <h1>Posts</h1>
      <p>Post Page</p>
      <ul>
        {posts.map((post) => (
          <li
            key={post.id}
            style={{
              marginBottom: "1rem",
              marginTop: "1rem",
            }}
          >
            <p>
              {/* <button> 컴포넌트를 사용하여 다른 경로로 이동할 수 있습니다. */}
              <button
                onClick={() => {
                  navigate({
                    to: "/posts/$postId",
                    params: { postId: post.id.toString() },
                  });
                }}
              >
                {post.title}
              </button>{" "}
            </p>
            {/* <Link> 컴포넌트를 사용하여 다른 경로로 이동할 수 있습니다. */}
            <p>
              <Link to="/posts/$postId" params={{ postId: post.id.toString() }}>
                {post.title}
              </Link>
            </p>
          </li>
        ))}
      </ul>
    </div>
  );
}

import { getRouteApi } from "@tanstack/react-router";
 
const route = getRouteApi("/posts/");
 
const PostList = () => {
  const posts = route.useLoaderData();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </li>
      ))}
    </ul>
  );
};
 
export default PostList;

//... posts page
return <PostList />;

import { getRouteApi } from "@tanstack/react-router";
const postRoute = getRouteApi("/posts/");
 
const PostList = () => {
  const posts = postRoute.useLoaderData();
  const params = postRoute.useParams();
  const search = postRoute.useSearch();
 
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </li>
      ))}
    </ul>
  );
};
 
export default PostList;

export const getPost = async (id: number): Promise<Post> => {
  try {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/posts/${id}`
    );
    if (!response.ok) {
      throw new Error("데잍터를 불러오는데 실패했습니다.");
    }
 
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
    return {} as Post;
  }
};

import { createFileRoute } from "@tanstack/react-router";
import { getPost } from "../../services/api";
 
export const Route = createFileRoute("/posts/$postId")({
  loader: async ({ params }) => await getPost(+params.postId), // 파라미터는 문자열 타입이기 때문에 받는 데이터가 숫자 타입이라면 숫자로 변환해야 합니다.
  component: RouteComponent,
});
 
function RouteComponent() {
  const post = Route.useLoaderData();
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

// ...
export const Route = createFileRoute("/posts/$postId")({
  loader: async ({ params }) => {
    await new Promise((resolve) => setTimeout(resolve, 3000));
    // 임시로 Promise를 사용하여 3초 뒤에 데이터를 가져오도록 설정하였습니다.
    return await getPost(+params.postId);
  },
  pendingComponent: () => <div>Loading...</div>,
  pendingMs: 500, // 기본적으로 1000ms 입니다. 별도의 설정을 할 수 있습니다.
  component: RouteComponent,
});
 
// ... RouteComponent 부분