标签: react-link

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
Run Code Online (Sandbox Code Playgroud)

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about"> …
Run Code Online (Sandbox Code Playgroud)

reactjs react-router next.js react-link next-router

4
推荐指数
1
解决办法
2898
查看次数

标签 统计

next-router ×1

next.js ×1

react-link ×1

react-router ×1

reactjs ×1