Next.js nextjs动态链接导致页面重新加载

我是nextjs新手，尝试列出博客，点击博客，应该加载带有动态URL blog/[slug].js的页面，但是使用链接和Router.push（“）会重新加载页面

blogs.js

import Link from 'next/link';
const renderBlogs = (blogs) => {
    return blogs.map(blog => <Link href={`/blog/${blog.slug}`}>
            <a key={blog.id}>{blog.title}</a>
        </Link>
    )
}
function Myblogs(props) {
    let blogs = [
        { id: 1, title: "blog 1", slug: "blog-1" },
        { id: 2, title: "blog 2", slug: "blog-2" }
    ]
    return renderBlogs(blogs);
}
export default Myblogs;

import { useRouter } from 'next/router'
const SingleBlog = (props) => {
    const router = useRouter()
    const slug = router.query.slug
    return <>
        <h3>Single Blog</h3>
        <p>{slug}</p>
    </>
}
export default SingleBlog

从“下一个/链接”导入链接；
const renderBlogs=（博客）=>{
返回blogs.map（blog=>
{blog.title}
)
}
功能Myblogs（道具）{
让博客=[
{id:1，标题：“blog 1”，slug：“blog-1”}，
{id:2，标题：“blog 2”，slug：“blog-2”}
]
返回renderBlogs（博客）；
}
导出默认myblog；

blog/[slug].js

import Link from 'next/link';
const renderBlogs = (blogs) => {
    return blogs.map(blog => <Link href={`/blog/${blog.slug}`}>
            <a key={blog.id}>{blog.title}</a>
        </Link>
    )
}
function Myblogs(props) {
    let blogs = [
        { id: 1, title: "blog 1", slug: "blog-1" },
        { id: 2, title: "blog 2", slug: "blog-2" }
    ]
    return renderBlogs(blogs);
}
export default Myblogs;

import { useRouter } from 'next/router'
const SingleBlog = (props) => {
    const router = useRouter()
    const slug = router.query.slug
    return <>
        <h3>Single Blog</h3>
        <p>{slug}</p>
    </>
}
export default SingleBlog

从“下一个/路由器”导入{useRouter}
const SingleBlog=（道具）=>{
const router=useRouter（）
常量slug=router.query.slug
返回
单一博客
{slug}

}
导出默认的SingleBlog

我试图在不重新加载的情况下加载[slug].js，但不知何故，链接会导致页面重新加载。

---

提前感谢。

缺少

链接的
组件的
作为
道具。这是必需的

…等等
const renderBlogs=blogs=>(
blogs.map（{id，slug，title}）=>(
{title}
)            
);
等
我使用“as”属性的问题是，当我重新加载页面时，它显示404。你知道如何解决这个问题吗？这个答案现在已被弃用。下一个v9.5.3及更高版本不再需要
as
属性。但是如何在没有“as”的情况下显示自定义url属性？看。哦，我明白了，但我面临的是，我需要在发送到页面时显示一个特定的url名称。示例/About应该是/About-website。使用“as”可以这样做，但由于它已被弃用，您有何建议？