리믹스 및 동적 경로

이제 post overview page in Remix이 있으므로 이 데이터에서 개별 페이지를 추가하는 방법을 살펴보겠습니다.

이미 개요의 게시물을 클릭하고 다음과 같은 각 페이지로 이동할 수 있습니다.

posts/post-1

posts/post-2

그러나 지금은 존재하지 않으므로 동적으로 작동하도록 만드는 방법을 살펴보겠습니다.

따라 하려면 시작 지점으로 this GitHub repo을 다운로드하십시오.

빠른 요약

이전 기사에서 데이터 소스 역할을 하는 게시물 모델을 추가했습니다. 여기에서 찾을 수 있습니다: app/models/post.server.ts .

지금은 단순히 게시물 배열을 출력하지만 결국 외부 소스에서 이 로드를 만들도록 노력할 것입니다.

개요 페이지에 이러한 게시물을 로드하기 위해 Remix에 내장된 useLoaderData 후크를 사용합니다.

동일한 개념을 적용하여 동적 페이지를 만들 것입니다.
이러한 많은 최신 프레임워크와 마찬가지로 동적 파일로 사용할 수 있는 하나의 파일을 생성할 수 있는 옵션이 있습니다.

Remix에서는 달러 기호를 사용하여 파일을 동적으로 만듭니다.
동적 게시물 파일을 생성합니다: app/routes/posts/$slug.tsx .

import { json, LoaderFunction } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { getPost } from '~/models/post.server';

type LoaderData = {
  post: Awaited<ReturnType<typeof getPost>>,
};

export const loader: LoaderFunction = async ({ params }) => {
  return json({
    post: await getPost(params.slug),
  });
};

이제 슬러그를 기반으로 이 매개변수와 일치하는 게시물을 찾습니다.

그러나이 getPost 함수는 아직 존재하지 않으므로 model를 열고 빠르게 만들어 보겠습니다.

export async function getPost(slug: string | undefined): Promise<Post> {
  const posts = await getPosts();
  return posts.filter((post) => post.slug === slug)[0];
}

보시다시피 이것은 모든 게시물을 검색하는 기존 함수를 기반으로 하지만 슬러그를 기반으로 일치하도록 제한합니다.

그런 다음 일부 HTML을 반환하고 예를 들어 게시물 제목을 렌더링할 수 있습니다.

export default function PostSlug() {
  const { post } = useLoaderData() as LoaderData;
  return (
    <main className="mx-auto max-w-4xl">
      <h1 className="my-6 border-b-2 text-center text-3xl">
        The post title: {post.title}
      </h1>
    </main>
  );
}

그것을 시도하고 무슨 일이 일어나는지 봅시다.



네, 해냈습니다.
이제 Remix에서 동적 경로를 관리했습니다.

완성된 코드는 GitHub에서 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나