时间戳

首页 > 解决方案 > 如何在 Next JS 上显示没有页码的路由的第一页

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

问题描述

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

我的页面文件夹如下所示：

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

我能够使用 Next 提供的getStaticPaths函数呈现所有静态页面。

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

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

标签： javascriptreactjsnext.js

解决方案

可能有（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: {}
    }
}

推荐阅读