Next.js学习系列:在页面之间导航4
客户端导航
"链接
“组件支持在同一 Next.js 应用中的两个页面之间进行客户端导航。
客户端导航意味着_使用JavaScript_进行页面转换,这比浏览器完成的默认导航更快。
以下是验证它的简单方法:
- 使用浏览器的开发人员工具将 的 CSS 属性更改为 。
background``````<html>``````yellow
- 单击链接以在两个页面之间来回切换。
- 您将看到黄色背景在页面过渡之间保持不变。
这表明浏览器_未_加载整个页面,并且客户端导航正常工作。
如果您使用了而不是并执行此操作,则在单击链接时将清除背景色,因为浏览器会执行完全刷新。<a href="…">``````<Link href="…">
代码拆分和预取
接Next.js会自动执行代码拆分,因此每个页面仅加载该页面所需的内容。这意味着当呈现主页时,最初不会提供其他页面的代码。
这可确保即使您有数百个页面,主页也能快速加载。
仅加载您请求的页面的代码也意味着页面变得孤立。如果某个页面引发错误,应用程序的其余部分仍将正常工作。
此外,在 Next.js 的生产版本中,每当链接
组件出现在浏览器的视口中时,Next.js会自动在后台预取链接页面的代码。当您单击该链接时,目标页面的代码将已在后台加载,并且页面过渡将几乎是即时的!
总结
接下来.js通过代码拆分、客户端导航和预取(在生产环境中)自动优化应用程序以获得最佳性能。
您可以在页面
下将路由创建为文件,并使用内置的链接
组件。不需要路由库。
您可以在路由文档中的 API 参考中了解有关下一个/链接
和路由的常规组件的详细信息。Link
**注意:**如果您需要链接到 Next.js 应用外部的_外部_页面,只需使用不带 .
<a>``````Link
如果需要添加属性,例如 ,请将其添加到标记中,_而不是_添加到标记中。下面是一个示例。
className``````a``````Link
快速审阅:用户打开浏览器并导航到 。此页面最初加载了什么 JavaScript?your-blog.com/posts/first-post
- 原文作者:知识铺
- 原文链接:https://geek.zshipu.com/post/nextjs/nextjsbase/Next.js%E5%AD%A6%E4%B9%A0%E7%B3%BB%E5%88%97%E5%9C%A8%E9%A1%B5%E9%9D%A2%E4%B9%8B%E9%97%B4%E5%AF%BC%E8%88%AA4/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。
- 免责声明:本页面内容均来源于站内编辑发布,部分信息来源互联网,并不意味着本站赞同其观点或者证实其内容的真实性,如涉及版权等问题,请立即联系客服进行更改或删除,保证您的合法权益。转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。也可以邮件至 sblig@126.com