次のダイナミックルーティングへの初心者向けガイド.js

今週、このチュートリアルのトピックは次のダイナミックルーティングです.jsより正確に、私たちは行きます:

ダイナミックルートを作成する方法

リンクコンポーネントでページ間を移動する方法

クエリパラメータの取得方法

次のダイナミックルートを作成する方法。js

スタティックルーティングのチュートリアルでは、次のようにします.JSの概念に基づいてルートを定義pages .
それはどういう意味ですか.あらゆる次.JSプロジェクトはページフォルダが付属しています.ページフォルダの構造は、あなたのルートの構造とそのフォルダの中のすべてのファイルをアプリケーションのルートにマッピングします.
基本的に、ルートを作成するたびに、ページフォルダにファイルを追加する必要があります.ページフォルダ自体がルートURLを意味することを忘れないでください.
静的ルーティングの場合、インデックスを追加することで新しいルートを作成できます.JSまたは名前付きファイルのような.js
ページ/インデックス.JSマップ
関連ページ.関連する地図
ヒント:静的ルート(ネストルートを含む)を作成する方法の詳細については、を読んでください.
しかし、それはどのようにダイナミックなルートのために働きますか?私はブログを作成したいと思います、どのように私はMyBlogなどのルートを追加します.com/投稿/ID ?
次.jsはファイル名としてパラメータ(例えばg [ id ])の周りのブラケットをサポートすることによって動的なルートを扱います.私のブログの例に戻ると、したがって、私は[ id ]を作成します.私のポストフォルダの中のJSファイル.
その結果、/page/post/[ id ]となります.JSはあなたのポストのユニークなIDである/POST/[ ID ]にマップします.

次のダイナミックネストルート。js

ダイナミックネストドルートを作成できますか?私は特定のポストに関連したコメントのためにページが欲しいと言いました、私は/post/[ id ]/[ commentid ]のようなURLを持つことができましたか?
答えはイエスです!
ネストしたルートでは、ファイルの代わりにフォルダーを作成する必要があります.構文は、あなたのフォルダが[ id ]と呼ばれるのと同じ意味にとどまります.その後、内側に新しいルートを追加することができます.最後に結果を示します.

pages/
│   index.js -> url: /    
│
└───posts/
     |  index.js  -> url: /posts
     |
     └─── [id]/
             index.js       -> url: /posts/[id]
             commentId.js   -> url: /posts/[id]/[commentId]

すべてのルートが設定されたので、別のページ間を移動する方法を調べましょう.

次のダイナミックルートに移動する方法。js

次.JSはページ間のナビゲーションを可能にするリンクと呼ばれるコンポーネントを提供します.このコンポーネントはHREFを受け入れ、ページに移動するコード(アンカーと言う)を取り囲んでいます.試してみましょう.
1 .

import Link from "next/link";

export default function Home() {
  return (
    <div>
      <h1>Welcome to my blog</h1>
      <div>
        <Link href="/posts/1">
          <a>Post #1</a>
        </Link>
      </div>
    </div>
  );
}

簡単ですが、ハードコーディングされたリンクは非常に実用的ではありません.私は別の投稿オブジェクトを作成し、私のURLを作成するために使用します.
1 .

import Link from "next/link";

const posts = [
  {
    id: 1,
    title: "Post #1"
  },
  {
    id: 2,
    title: "Post #2"
  }
];
export default function Home() {
  return (
    <div>
      <h1>Welcome to my blog</h1>
      {posts.map((post) => (
        <div key={`post-${post.id}`}>
          <Link href={`/posts/${encodeURIComponent(post.id)}`}>
            <a>{post.title}</a>
          </Link>
        </div>
      ))}
    </div>
  );
}

より良い!しかし、私が後で私のルートを更新するならば、どうですか?私はすべてのコードを通過し、すべてのリンクを更新する必要があります.
△3をお試しください.

import Link from "next/link";

const ROUTE_POST_ID = "posts/[id]";
const posts = [
  {
    id: 1,
    title: "Post #1"
  },
  {
    id: 2,
    title: "Post #2"
  }
];
export default function Home() {
  return (
    <div>
      <h1>Welcome to my blog</h1>
      {posts.map((post) => (
        <div key={`post-${post.id}`}>
          <Link
            href={{
              pathname: ROUTE_POST_ID,
              query: { id: post.id }
            }}
          >
            <a>{post.title}</a>
          </Link>
        </div>
      ))}
    </div>
  );
}

何が変わったのかハードコードURLの代わりに、リンクコンポーネントもHREFのオブジェクトを受け入れることができます.
このオブジェクトは2つのパラメータpathnameとqueryを含みます.パス名は、特定の場合、/post/[ id ])に移動したいルートと、動的ルート(IDのように)に必要なすべてのデータを含むクエリです.
リンクコンポーネントは、これらの2つを受け取り、自動的に正しいURLにフォーマットします.それははるかに良いです!

ページのアクセスクエリパラメータ

新しいページのパラメータにアクセスできますか?言い換えると、/post/[ id ]になるとID部分を取得できますか?
あなたが必要なすべての情報を取得することができますルータ自体から.単に、userouterをインポートして、ルータオブジェクトを得てください.同様に、ナビゲーション用のクエリオブジェクトを渡しますquery : { id: post.id } , 我々は、我々の新しいページでそれを取り戻すことができます.

import { useRouter } from "next/router";

export default function PostPage() {
  const router = useRouter();
  return <div>Post #{router.query.id}</div>;
}

最後に結果を示します.

そこに行く!あなたが完全なコードを見て、少しそれを再生したいならば、私はサンドボックスをつくりました:Next.js Dynamic Routing CodeSandbox .
あなたが記事が好きならば、あなたはそうすることができます...