是否可以导航到另一条路线，然后转到特定的书签

Question

所以我使用的是基于react.js构建的Next.js，问题是：

我希望能够导航到另一条路线，然后使用HTML5书签功能转到该目的地路线中的特定div。

显然，按照正常方式，只给nav项提供div的id是行不通的，因为页面的内容还没有呈现出来，所以必须在发送请求后进行。

有办法实现这一点吗？

Answer 1

如果您的目标页面从后端服务器客户端请求目标内容(例如通过XHR或Fetch(，HTML 5书签确实无法工作。

要使用Next.js解决此问题，可以通过在getInitialProps方法中加载目标内容来为目标页面启用服务器端渲染：

function DestinationPage({ targetContent }) {
// render your target content somehow
}
DestinationPage.getInitialProps = async () => {
const targetContent = await fetch(backendUrl);
return { targetContent };
}
export default DestinationPage;

因此，您将在服务器端请求您的目标内容，并在浏览器中呈现已经提供了内容的页面因此，您的书签将最初出现在您的页面上

您可以在这篇博客文章中阅读更多关于如何将Next.js页面切换到服务器端渲染模式的信息。