2

我是 NextJS 的新手。我想知道下一个/路由器和下一个/链接之间的典型变化和用例。

我应该在各种场景中使用哪一个？哪个做什么？例如，如果我想加载共享组件或在服务器端呈现的页面之间导航。另外，如果我使用普通的“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

4

2 回答 2

4

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

<a>普通标签和next/linkor之间的主要区别在于next/router后两者用于客户端转换。因此，普通<a>标签将通过 http 请求加载/导航到页面，而路由器和链接将加载页面客户端。

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

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

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

于 2020-09-07T07:31:06.630 回答
1

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

于 2020-09-07T07:44:48.870 回答