我刚刚开始学习Next.js ，我遇到了一个名为 <Link/> 的组件用于不同页面之间的路由，但我使用 react-bootstrap navbar 的库;该库提供Nav.Link ，该组件的作用与 Link 相同。组件。
我应该仅使用 Link或Nav.Link ？当我尝试输入 Link里面Nav.Link组件，它给了我:
Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server.
感谢您花时间阅读我的问题。
最佳答案
在 Next.js 版本 13 中，Link是 HTML <a> 的包装器元素，您可以在官方documentation上阅读:
<Link>is a React component that extends the HTML<a>element to provide prefetching and client-side navigation between routes. It is the primary way to navigate between routes in Next.js.
和Nav.Link来自react-boostrap默认渲染 HTML <a>以及。所以你最终有两个嵌套的 <a> ，这是不正确的。
对于 Next.js 中的重定向，更喜欢使用 Link来自 Next.js。如果你想使用Nav.Link来自react-bootstrap出于样式目的，您可以使用 as属性，如下所示:
<Nav.Link as="span">
<Link href={"/about"}>About</Link>
</Nav.Link>
关于javascript - 错误: Hydration failed because the initial UI does not match what was rendered on the server when using Link element，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/75117827/