Можно ли перейти на другой маршрут и сразу перейти к определенной закладке c?

Question

, поэтому я использую Next. js, который построен на реакции. js, и вот проблема:

Я хочу иметь возможность перейти к другому маршруту и ​​затем перейти к конкретному c div в этом маршруте назначения с использованием функции закладок HTML 5.

очевидно, что обычным способом это не сработает, просто присвоив элементам навигации идентификатор элемента div, поскольку содержимое страницы не изменилось. еще не было обработано, поэтому это необходимо сделать после отправки запроса.

есть ли способ реализовать это?

Answer 1

Закладки HTML 5 действительно не будут работать, если ваша целевая страница запрашивает целевой контент со стороны клиента внутреннего сервера (например, через XHR или Fetch).

Чтобы решить эту проблему с помощью 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 в режим рендеринга на стороне сервера, можно узнать в this сообщение в блоге .