Как обработать браузерную кнопку назад в react?

Пользователь

от deion , в категории: JavaScript , год назад

Как обработать браузерную кнопку назад в react?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от vladimir , год назад

@deion 

В React можно обработать браузерную кнопку "Назад" (Back Button) с помощью следующих подходов:

  1. Использование react-router: React Router предоставляет компонент useHistory, который можно использовать для перехвата нажатия кнопки "Назад" и выполнения необходимых действий. Например, можно создать обработчик для события popstate и использовать его для перехвата событий нажатия кнопки "Назад". Вот пример:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  useEffect(() => {
    const unlisten = history.listen(() => {
      // выполнить необходимые действия при нажатии кнопки "Назад"
    });

    return () => {
      unlisten();
    };
  }, [history]);

  return <div>Мой компонент</div>;
}


  1. Использование window.onpopstate: Вы можете использовать метод window.onpopstate для обработки нажатия кнопки "Назад" в браузере. Вот пример:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const handlePopstate = () => {
      // выполнить необходимые действия при нажатии кнопки "Назад"
    };

    window.addEventListener('popstate', handlePopstate);

    return () => {
      window.removeEventListener('popstate', handlePopstate);
    };
  }, []);

  return <div>Мой компонент</div>;
}


Независимо от того, какой подход вы выберете, обработка нажатия кнопки "Назад" в React может быть довольно простой. Вы можете использовать эти подходы для обработки различных сценариев, таких как переходы между страницами и изменения URL-адреса.

Пользователь

от elda , 2 месяца назад

@deion 

Теперь Ваша задача написать компонент, который будет отслеживать нажатие кнопки назад в браузере и выполнить определенные действия при этом.


Пример компонента, использующего react-router:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  useEffect(() => {
    const handleBackButton = () => {
      // выполнить необходимые действия при нажатии кнопки "Назад"
      console.log('Нажата кнопка "Назад"');
    };

    window.addEventListener('popstate', handleBackButton);

    return () => {
      window.removeEventListener('popstate', handleBackButton);
    };
  }, []);

  return <div>Мой компонент</div>;
}

export default MyComponent;


Вы можете добавить свою логику обработки кнопки "Назад" внутри функции handleBackButton. В примере просто выводится сообщение в консоль.


Пример компонента, использующего window.onpopstate:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const handleBackButton = () => {
      // выполнить необходимые действия при нажатии кнопки "Назад"
      console.log('Нажата кнопка "Назад"');
    };

    window.onpopstate = handleBackButton;

    return () => {
      window.onpopstate = null;
    };
  }, []);

  return <div>Мой компонент</div>;
}

export default MyComponent;


В обоих случаях компонент будет отслеживать нажатие кнопки "Назад" в браузере и выполнит заданные действия при этом.