解决 Next.js 中页面跳转时报 404 错误的问题-JavaScript中文网-JavaScript教程资源分享门户

在使用 Next.js 进行开发时，我们经常会遇到页面跳转时报 404 错误的问题。这种问题通常是由于 Next.js 的路由配置出现问题导致的。本文将介绍如何解决这个问题，并提供示例代码。

问题分析

在 Next.js 中，页面的路由配置主要是通过 pages 目录下的文件来实现的。例如，我们可以在 pages 目录下创建一个名为 about.js 的文件来实现一个关于页面的路由：

// javascriptcn.com 代码示例
// pages/about.js
import React from 'react'

const AboutPage = () => {
  return (
    <div>
      <h1>About</h1>
      <p>This is the about page.</p>
    </div>
  )
}

export default AboutPage

这个页面的路由路径就是 /about。

但是，在实际开发中，我们可能会遇到一些特殊的情况，例如：

需要使用动态路由，例如 /post/1、/post/2 等；
需要使用带参数的路由，例如 /search?q=keyword；
需要使用自定义的路由配置，例如 /blog 路径下的所有页面都使用 BlogLayout 组件作为布局。

这些情况都需要特殊的路由配置来实现。如果路由配置出现问题，就会导致页面跳转时出现 404 错误。

解决方案

使用动态路由

如果需要使用动态路由，可以在 pages 目录下创建一个名为 [id].js 的文件来实现。这个文件中的 id 参数可以在页面组件的 getInitialProps 方法中通过 query 参数获取到。例如：

// javascriptcn.com 代码示例
// pages/[id].js
import React from 'react'

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

PostPage.getInitialProps = async ({ query }) => {
  const id = query.id
  const response = await fetch(`https://api.example.com/posts/${id}`)
  const post = await response.json()
  return { post }
}

export default PostPage

这个页面的路由路径可以是 /post/1、/post/2 等。

使用带参数的路由

如果需要使用带参数的路由，可以在 pages 目录下创建一个名为 search.js 的文件，并在页面组件中使用 useRouter 钩子来获取参数。例如：

// javascriptcn.com 代码示例
// pages/search.js
import React from 'react'
import { useRouter } from 'next/router'

const SearchPage = () => {
  const router = useRouter()
  const keyword = router.query.q || 'No keyword'

  return (
    <div>
      <h1>Search</h1>
      <p>You searched for: {keyword}</p>
    </div>
  )
}

export default SearchPage

这个页面的路由路径可以是 /search?q=keyword。

使用自定义的路由配置

如果需要使用自定义的路由配置，可以在 pages 目录下创建一个名为 _app.js 的文件，并在这个文件中使用 getInitialProps 方法来获取路由信息。例如：

// javascriptcn.com 代码示例
// pages/_app.js
import React from 'react'
import App from 'next/app'

const MyApp = ({ Component, pageProps, routerInfo }) => {
  return (
    <div>
      <h1>{routerInfo.title}</h1>
      <Component {...pageProps} />
    </div>
  )
}

MyApp.getInitialProps = async ({ Component, ctx }) => {
  let pageProps = {}

  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx)
  }

  const routerInfo = {
    title: 'My App'
  }

  return { pageProps, routerInfo }
}

export default MyApp

这个文件中的 Component 参数是当前页面的组件，pageProps 参数是当前页面的 getInitialProps 方法返回的数据，routerInfo 参数是自定义的路由信息。

示例代码

下面是一个完整的 Next.js 应用，包含了以上三种路由配置方式的示例代码。你可以在本地运行这个应用，尝试不同的路由路径来测试路由配置是否正确。

// javascriptcn.com 代码示例
// pages/index.js
import React from 'react'
import Link from 'next/link'

const HomePage = () => {
  return (
    <div>
      <h1>Home</h1>
      <ul>
        <li><Link href="/about"><a>About</a></Link></li>
        <li><Link href="/post/1"><a>Post 1</a></Link></li>
        <li><Link href="/post/2"><a>Post 2</a></Link></li>
        <li><Link href="/search?q=keyword"><a>Search</a></Link></li>
        <li><Link href="/blog"><a>Blog</a></Link></li>
      </ul>
    </div>
  )
}

export default HomePage

// pages/about.js
import React from 'react'

const AboutPage = () => {
  return (
    <div>
      <h1>About</h1>
      <p>This is the about page.</p>
    </div>
  )
}

export default AboutPage

// pages/[id].js
import React from 'react'

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

PostPage.getInitialProps = async ({ query }) => {
  const id = query.id
  const response = await fetch(`https://api.example.com/posts/${id}`)
  const post = await response.json()
  return { post }
}

export default PostPage

// pages/search.js
import React from 'react'
import { useRouter } from 'next/router'

const SearchPage = () => {
  const router = useRouter()
  const keyword = router.query.q || 'No keyword'

  return (
    <div>
      <h1>Search</h1>
      <p>You searched for: {keyword}</p>
    </div>
  )
}

export default SearchPage

// pages/_app.js
import React from 'react'
import App from 'next/app'

const MyApp = ({ Component, pageProps, routerInfo }) => {
  return (
    <div>
      <h1>{routerInfo.title}</h1>
      <Component {...pageProps} />
    </div>
  )
}

MyApp.getInitialProps = async ({ Component, ctx }) => {
  let pageProps = {}

  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx)
  }

  const routerInfo = {
    title: 'My App'
  }

  return { pageProps, routerInfo }
}

export default MyApp

总结

在 Next.js 中，正确的路由配置是保证页面跳转正确的关键。本文介绍了使用动态路由、带参数的路由和自定义的路由配置来解决页面跳转时出现 404 错误的问题，并提供了示例代码。希望这篇文章对你有所帮助，如果你有任何问题或建议，请在评论区留言。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653c71be7d4982a6eb691567