NextJS动态路由,“as”真的有必要吗?

wpx232ag  于 2022-12-23  发布在  其他
关注(0)|答案(1)|浏览(129)

两个链接的工作原理完全相同,我们真的需要使用as吗?我们不能只使用href吗?

import Link from 'next/link'

export default function () {
  return (<>
    <Link href="/someroute">
      <a>WithOUT as</a>
    </Link>

    <br />
    <br />

    <Link href="/[param]" as="/someroute">
      <a>With as</a>
    </Link>
  </>
  )
}
aiazj4mn

aiazj4mn1#

“as”用来表示一个更好的url。例如,因为你在一个动态路由中,param可能是一些非常疯狂的东西,可能是一个mongodb id或者任何散列值

// mongodb id
 /507f191e810c19729de860ea

 // maybe ipfs hash
 /mtwirsqawjuoloq2gvtyug2tc3jbf5htm2zeo4rsknfiv3fdp46a

来自早期文档
href是页面使用的文件系统路径,它不应该在运行时更改。另一方面,as在大多数情况下会根据您的需要动态变化。
因此,当next.js导航时,为了决定呈现哪个页面,它将查看href,但是为了决定向用户显示哪个url,它将查看as

当“as”有帮助时

假设您有一个DynamicPostComponent,并且要传递post属性

const DynamicPostComponent = ({post}) => {}

在这个组件中,您将告诉next.js在pages目录中的位置,因此使用href

// assume we have "pages/posts/[slug]" directory
  href="/posts/[slug]"

现在在页面内部你需要读取blog的id,这样你就必须获取帖子来显示用户。为此你使用as

as={`/posts/${post.slug}`

您的链接组件将如下所示

<Link href="/postss/[slug]" as={`/posts/${post.slug}`}>
    <a>
     
    </a>
  </Link>

as在v10之后被删除。https://nextjs.org/blog/next-10

**自动解析href:**next/link上不再需要as属性

相关问题