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

问题描述

我是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

解决方法

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

普通<a>标签和next/link或next/router之间的主要区别在于后两个标签用于client-side transitions。因此，普通的<a>标签将通过http请求加载/导航到页面，而router和link则通过客户端加载页面。

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

因此，路由器和链接的行为类似，因此您可以根据应用程序需要选择使用哪个。

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

,

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