如何在 Next JS 上显示没有页码的路由的第一页

Question

我一直在尝试创建一个包含数字分页的博客页面。

我的页面文件夹如下：

src
-pages
--blog
---[id].tsx

我可以使用 Next 提供的 getStaticPaths 函数渲染所有静态页面。

问题是我想将首页显示为 /blog 而不是 /blog/1。

当有/blog/1内容时，如何推送路由/blog？

Answer 1

可能有 (1) 客户端路由和 (2) 服务器端路由

创建新页面blog/index.tsx

src
-pages
--blog
---[id].tsx
---index.tsx

并在 index.tsx 中重定向到 /blog/1(客户端路由)

import { useEffect } from 'react'
import { useRouter } from 'next/router'

export default function Blog() {

  useEffect(() => {
    router.push('/blog/1')
  }, [])

  return <p>Redirecting...</p>
}

服务器端路由

import { useEffect } from 'react'
import { useRouter } from 'next/router'

export default function Blog() {

  useEffect(() => {
    router.push('/blog/1')
  }, [])

  return <p>Redirecting...</p>
}

export const getServerSideProps = ({ req, res }) => {
    res.writeHead(302, { Location: "/blog/1" });
    res.end();
    return {
        props: {}
    }
}