是否可以导航到另一条路线并在之后立即转到特定书签？

Question

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

我希望能够导航到另一条路线，然后使用 HTML 5 书签功能前往该目标路线中的特定 div。

显然，在正常情况下，仅通过给导航项提供 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;

因此，您将在服务器端请求您的目标内容，并在浏览器中呈现一个已包含您的内容的页面。 因此您的书签最初会出现在您的页面上。

您可以在 this blog post 中阅读有关如何将 Next.js 页面切换到服务器端呈现模式的更多信息。

是否可以导航到另一条路线并在之后立即转到特定书签？

is it possible to navigate to another route and going to a specific bookmark right after?

reactjs

routing

next.js

bookmarks