我是 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 请求加载/导航到页面,而路由器和链接将加载页面客户端。
您可以使用 next/router
(在组件的函数内)当 next/link
时还不够,例如,如果您需要在渲染新组件之前执行一些操作。
因此路由器和链接都有相似的行为,您可以根据您的应用需要做什么来选择使用哪一个。
两者都将运行数据获取方法(getServerSideProps
、getStaticProps
和 getInitialProps
)
关于reactjs - NextJS 中路由器和链接的典型区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63771990/