📌  相关文章
📜  Next.js-动态路由

📅  最后修改于: 2020-10-22 06:46:36             🧑  作者: Mango

在Next.js中，我们可以动态创建路由。在此示例中，我们将动态创建页面及其路由。

  • 步骤1.定义[id] .js文件-[id] .js表示动态页面，其中id为相对路径。在pages / post目录中定义此文件。

  • 步骤2.定义lib / posts.js -posts.js表示ID和内容。 lib目录将在根目录中创建。

[id] .js

使用设置路径的getStaticPaths（）方法更新[id] .js文件，并使用id更新getStaticProps（）方法以获取内容。

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

import { getAllPostIds, getPostData } from '../../lib/posts'

export default function Post({ postData }) {
   return (
      
         {postData.id}
         

         {postData.title}
         

         {postData.date}
      
   )
}
export async function getStaticPaths() {
   const paths = getAllPostIds()
   return {
      paths,
      fallback: false
   }
}

export async function getStaticProps({ params }) {
   const postData = getPostData(params.id)
      return {
      props: {
         postData
      }
   }
}

posts.js

posts.js包含用于获取ID的getAllPostIds（）和用于获取相应内容的getPostData（）。

export function getPostData(id) {
   const postOne = {
      title: 'One',
      id: 1,
      date: '7/12/2020'
   }

   const postTwo = {
      title: 'Two',
      id: 2,
      date: '7/12/2020'
   }
   if(id == 'one'){
      return postOne;
   }else if(id == 'two'){
      return postTwo;
   }  
}

export function getAllPostIds() {
   return [{
      params: {
         id: 'one'
      }
   },
   {
      params: {
         id: 'two'
      }
   }
];
}

启动Next.js服务器

运行以下命令以启动服务器-。

npm run dev
> nextjs@1.0.0 dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

验证输出

在浏览器中打开localhost：3000 / posts / one，您将看到以下输出。

一

在浏览器中打开localhost：3000 / posts / two，您将看到以下输出。

二