处理动态路由数据的正确方式

在 Next.js 中，动态路由是一种非常有用的功能，它可以让我们根据 URL 参数来动态地渲染页面内容。但是，如何正确地处理动态路由数据可能会成为一个挑战。在本文中，我们将介绍如何使用 Next.js 处理动态路由数据，并提供一些示例代码和指导意义。

什么是动态路由？

动态路由是一种在 URL 中包含参数的路由。例如，我们可以使用动态路由来渲染博客文章页面，其中 URL 包含文章的 ID，如 /blog/1。在 Next.js 中，我们可以使用 [param] 的格式来定义动态路由。例如，我们可以使用以下代码定义一个动态路由：

// www.javascriptcn.com code example
// pages/blog/[id].js
export default function BlogPost({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  )
}

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://example.com/posts/${params.id}`)
  const post = await res.json()

  return {
    props: {
      post,
    },
  }
}

在上面的代码中，我们定义了一个名为 BlogPost 的组件，并在 URL 中使用 [id] 参数来定义动态路由。我们还使用 getServerSideProps 函数来获取文章数据，并将其作为 props 传递给组件。

在处理动态路由数据时，我们需要考虑以下几个方面：

1. 错误处理

当用户请求一个不存在的动态路由时，我们需要向用户显示一个错误页面。在 Next.js 中，我们可以使用自定义的 _error.js 页面来处理错误。例如，我们可以使用以下代码来定义一个错误页面：

// www.javascriptcn.com code example
// pages/_error.js
export default function CustomError({ statusCode }) {
  return (
    <div>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : 'An error occurred on client'}
    </div>
  )
}

CustomError.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

在上面的代码中，我们定义了一个名为 CustomError 的组件，并使用 getInitialProps 函数来获取错误状态码。根据错误状态码，我们向用户显示不同的错误信息。

2. 数据获取

在处理动态路由数据时，我们需要使用 getServerSideProps 或 getStaticProps 函数来获取数据。这两个函数分别在服务器端和静态生成页面时执行，它们可以确保我们在渲染页面时已经获取了所需的数据。在使用这些函数时，我们需要注意以下几点：

我们应该使用 try-catch 语句来处理数据获取时的错误，并将错误信息传递给组件。
我们应该将数据作为 props 传递给组件，以便在组件中使用。
我们应该使用 revalidate 选项来控制静态页面的重新生成时间，以确保数据的及时更新。

例如，我们可以使用以下代码来获取博客文章数据：

// www.javascriptcn.com code example
// pages/blog/[id].js
export default function BlogPost({ post, error }) {
  if (error) {
    return <CustomError statusCode={error.statusCode} />
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  )
}

export async function getServerSideProps({ params }) {
  try {
    const res = await fetch(`https://example.com/posts/${params.id}`)
    const post = await res.json()

    return {
      props: {
        post,
      },
    }
  } catch (error) {
    return {
      props: {
        error: {
          statusCode: error.statusCode,
        },
      },
    }
  }
}

在上面的代码中，我们使用 try-catch 语句来处理数据获取时的错误，并将错误信息传递给组件。我们还将文章数据作为 props 传递给组件，并在组件中使用它。

3. 路由跳转

在处理动态路由数据时，我们可能需要在组件中执行路由跳转。在 Next.js 中，我们可以使用 useRouter 钩子来获取路由信息，并使用 router.push 函数来执行路由跳转。例如，我们可以使用以下代码来跳转到博客文章列表页面：

// www.javascriptcn.com code example
// pages/blog/[id].js
import { useRouter } from 'next/router'

export default function BlogPost({ post }) {
  const router = useRouter()

  function handleClick() {
    router.push('/blog')
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      <button onClick={handleClick}>Back to list</button>
    </div>
  )
}

在上面的代码中，我们使用 useRouter 钩子来获取路由信息，并使用 router.push 函数来执行路由跳转。我们还定义了一个名为 handleClick 的函数，它在用户点击按钮时执行路由跳转。

指导意义

处理动态路由数据是 Next.js 中的一个重要问题。正确地处理动态路由数据可以确保我们的页面在渲染时已经获取了所需的数据，并能够处理错误和执行路由跳转。在处理动态路由数据时，我们需要注意以下几点：

我们应该使用 getServerSideProps 或 getStaticProps 函数来获取数据。
我们应该使用 try-catch 语句来处理数据获取时的错误，并将错误信息传递给组件。
我们应该将数据作为 props 传递给组件，以便在组件中使用。
我们应该使用 revalidate 选项来控制静态页面的重新生成时间，以确保数据的及时更新。
我们应该使用 useRouter 钩子来获取路由信息，并使用 router.push 函数来执行路由跳转。

在处理动态路由数据时，以上几点都很重要。我们应该遵循这些最佳实践，以确保我们的页面能够正常渲染，并能够处理错误和执行路由跳转。

示例代码

以下是一个完整的示例代码，它演示了如何使用 Next.js 处理动态路由数据：

// www.javascriptcn.com code example
// pages/blog/[id].js
import { useRouter } from 'next/router'

export default function BlogPost({ post, error }) {
  const router = useRouter()

  if (error) {
    return <CustomError statusCode={error.statusCode} />
  }

  function handleClick() {
    router.push('/blog')
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      <button onClick={handleClick}>Back to list</button>
    </div>
  )
}

export async function getServerSideProps({ params }) {
  try {
    const res = await fetch(`https://example.com/posts/${params.id}`)
    const post = await res.json()

    return {
      props: {
        post,
      },
    }
  } catch (error) {
    return {
      props: {
        error: {
          statusCode: error.statusCode,
        },
      },
    }
  }
}

// pages/_error.js
export default function CustomError({ statusCode }) {
  return (
    <div>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : 'An error occurred on client'}
    </div>
  )
}

CustomError.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

以上代码演示了如何在 Next.js 中处理动态路由数据，并提供了错误处理和路由跳转的示例代码。在实际开发中，我们可以根据需要对代码进行修改和优化，以满足实际需求。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d8c8b2a941bf7134f5948a

处理动态路由数据的正确方式 - Next.js

什么是动态路由？