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

Question

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

在不同的场景下应该使用哪个？哪个做什么？例如，如果我想加载共享组件或在服务器端呈现的页面之间导航。如果我调用带有普通 'a' 标记的页面或使用 link/router 来实现相同的页面，又有什么区别。

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

Answer 1

如果我用普通的 'a' 标签调用页面或使用 link/router 来实现同样的效果有什么区别？

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

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

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

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

Answer 2

Link 只是路由器的抽象，使用 Link 组件比手动构造 [=16] 组件容易得多=]每次。

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

Typical differences between routers and links in NextJS

reactjs

react-router

next.js

react-link

next-router