Как можно узнать, обновилась ли страница после перехода по внешней ссылке в Next.js?

Question

Адольф

nextjs , react

Как можно узнать, обновилась ли страница после перехода по внешней ссылке в Next.js?

У меня есть такой код: <br/> <br/> <pre><code class="javascript">export const getPreviousUrl = () =&gt; {
  const headersList = headers();
  const previousUrl = headersList.get('referer');

  return previousUrl;
};</code></pre> <br/> <br/> Этот код получает URL предыдущей страницы, с которой мы пришли. Однако, если пользователь переходит по внешней ссылке и затем обновляет страницу несколько раз, он возвращает null вместо ссылки на исходную страницу, как будто пользователь каждый раз заходит по новой внешней ссылке. <br/> Как можно получить URL предыдущей страницы или хотя бы булево значение, которое подтвердит, что пользователь впервые перешел по внешней ссылке или обновил страницу?

18 ноября 2024 г. 10:03

Ответы на вопрос 1

Похожие вопросы

Answer 1

В Next.js нет стандартного способа отслеживания историй навигации браузера, особенно когда дело касается обновления страниц после перехода по внешней ссылке. Однако можно использовать некоторые подходы для отслеживания состояния и определения, что пользователь пришел с внешней ссылки или обновил страницу.

Вот несколько методов, которые могут помочь вам в этой задаче:

### 1. Использование `localStorage` или `sessionStorage`

Вы можете сохранить флаг в `localStorage` или `sessionStorage`, который указывает, что пользователь пришел с внешней ссылки. Этот флаг можно установить при переходе по ссылке, а затем проверить при загрузке страницы.

```javascript
// В компоненте, где вы обрабатываете переход
useEffect(() => {
  const previousUrl = sessionStorage.getItem("previousUrl"); 
  const currentUrl = window.location.href;

  if (document.referrer && document.referrer !== currentUrl) {
    // Переход с внешней ссылки
    sessionStorage.setItem("cameFromExternalLink", "true");
  } else {
    sessionStorage.setItem("cameFromExternalLink", "false");
  }

  sessionStorage.setItem("previousUrl", currentUrl);
}, []);
```

При загрузке страницы вы можете проверить значение `cameFromExternalLink` для определения, пришел ли пользователь с внешней ссылки:

```javascript
const cameFromExternalLink = sessionStorage.getItem("cameFromExternalLink") === "true";
```

### 2. Использование `document.referrer`

Вы можете использовать `document.referrer` для проверки, откуда пришёл пользователь. Если он был установлен, значит, пользователь пришёл с другой страницы:

```javascript
if (document.referrer) {
  // Пользователь пришёл с другой страницы
} else {
  // Пользователь пришёл напрямую или обновил страницу
}
```

Обратите внимание, что `document.referrer` будет пустым, если пользователь открыл страницу напрямую.

### 3. Обработка навигации с помощью Router события

Next.js предоставляет Router события, которые могут помочь отслеживать изменения маршрута и определять, пришёл ли пользователь с внешней ссылки.

```javascript
import { useEffect } from 'react';
import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      console.log('Route changed to: ', url);
    };

    router.events.on('routeChangeStart', handleRouteChange);

    return () => {
      router.events.off('routeChangeStart', handleRouteChange);
    };
  }, [router.events]);

  return (
    <div>
      <h1>My Page</h1>
      {/* Контент вашего компонента */}
    </div>
  );
};
```

Таким образом, комбинируя указанные методы, вы сможете более точно отслеживать историю навигации и определять, пришёл ли пользователь с внешних ссылок.