@delphine_bartoletti
Next.js предоставляет несколько методов, которые можно использовать для выполнения кода при переходе между страницами, включая закрытие окон.
Один из таких методов - это componentWillUnmount()
. Этот метод вызывается перед тем, как компонент будет удален из DOM, что делает его хорошим местом для закрытия окон.
Например, если у вас есть компонент MyComponent
, который открывает окно, вы можете добавить код для его закрытия в componentWillUnmount()
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { Component } from 'react'; class MyComponent extends Component { myWindow = null; componentDidMount() { this.myWindow = window.open('https://example.com', '_blank'); } componentWillUnmount() { this.myWindow.close(); } render() { return ( <div> <h1>My Component</h1> </div> ); } } export default MyComponent; |
В этом примере мы создаем окно при монтировании компонента MyComponent
и сохраняем ссылку на него в свойстве myWindow
. Затем, когда компонент будет размонтирован, мы закрываем окно, используя сохраненную ссылку.
Таким образом, при переходе на другую страницу, компонент MyComponent
будет удален из DOM, и его метод componentWillUnmount()
будет вызван, что приведет к закрытию окна.
Кроме того, вы можете использовать хуки жизненного цикла useEffect
для выполнения кода при размонтировании компонента. В этом случае вы можете использовать window.addEventListener
для отслеживания событий перехода на другую страницу и закрытия окон, как показано в примере ниже:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { useEffect } from 'react'; const MyComponent = () => { let myWindow = null; useEffect(() => { myWindow = window.open('https://example.com', '_blank'); return () => { myWindow.close(); }; }, []); return ( <div> <h1>My Component</h1> </div> ); }; export default MyComponent; |
В этом примере мы используем хук useEffect
для создания окна при монтировании компонента и добавления обработчика события для его закрытия при размонтировании. Обработчик события удаляется при размонтировании компонента с помощью функции, возвращаемой из useEffect
.
@delphine_bartoletti
Таким образом, закрытие окон при переходе между страницами в Next.js можно легко реализовать, используя методы componentWillUnmount() в классовых компонентах или хуки жизненного цикла useEffect для функциональных компонентов. Оба способа позволяют вам выполнить необходимые действия при размонтировании компонента, в том числе и закрытие окон.Выберите тот подход, который больше соответствует вашему стилю кодирования и реализуйте его в своем проекте Next.js.