NextJS 中路由器和链接的典型区别

Posted 2023-02-22

【中文标题】NextJS 中路由器和链接的典型区别

【英文标题】：Typical differences between routers and links in NextJS

【发布时间】：2020-12-25 13:05:57

【问题描述】：

我是 NextJS 的新手。我想知道 next/router 和 next/link 之间的典型变化和用例。

在各种情况下我应该使用哪一个？哪个做什么？例如，如果我想加载共享组件或在服务器端呈现的页面之间导航。另外，如果我使用普通的“a”标签调用页面或使用链接/路由器来实现相同的效果，有什么区别。

import  useRouter  from 'next/router'

function ActiveLink( children, href ) 
  const router = useRouter()
  const style = 
    marginRight: 10,
    color: router.pathname === href ? 'red' : 'black',
  

  const handleClick = (e) => 
    e.preventDefault()
    router.push(href)
  

  return (
    <a href=href onClick=handleClick style=style>
      children
    </a>
  )


export default ActiveLink

import Link from 'next/link'

function Home() 
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
    </ul>
  )


export default Home

【参考方案1】：

链接只是对路由器的抽象，使用Link组件比每次手动构造链接要容易得多。

【参考方案2】：

如果我用普通的“a”标签调用页面或使用链接/路由器来实现相同的效果，有什么区别？

普通的<a> 标签与next/link 或next/router 的主要区别在于后两者用于client-side transitions。所以一个普通的<a>标签会加载/导航到带有http请求的页面，而路由器和链接会加载页面客户端。

当next/link 不够用时，您可以使用next/router（在组件中的函数内部），例如，如果您需要在渲染新组件之前进行一些操作。

所以路由器和链接都有相似的行为，你可以根据你的应用需要做什么来选择使用哪一个。

两者都将运行数据获取方法（getServerSideProps、getStaticProps 和 getInitialProps）