Переход на предыдущую страницу с useNavigate

Понимание useNavigate

Когда вы разрабатываете веб-приложение, часто возникает необходимость перемещаться между страницами. Для управления этим процессом React предлагает библиотеку react-router-dom. Среди множества возможностей этой библиотеки есть хуки, которые делают вашу жизнь легче. Один из них — useNavigate. Этот хук позволяет программно перемещать пользователя на другую страницу или, в нашем случае, возвращать его назад.

Чтобы начать использовать useNavigate, убедитесь, что ваша установка React уже включает react-router-dom. Если нет, вы можете установить его с помощью команды:

npm install react-router-dom

Теперь, когда библиотека установлена, давайте познакомимся с основным функционалом.

Шаг 1: Настройка маршрутов

Прежде чем использовать useNavigate, необходимо настроить маршруты в вашем приложении. Для этого создайте компонент App и используйте BrowserRouter, Routes и Route из react-router-dom.

import React from "react";

import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./Home";

import About from "./About";



function App() {

    return (

        <BrowserRouter>

            <Routes>

                <Route path="/" element={<Home />} />

                <Route path="/about" element={<About />} />

            </Routes>

        </BrowserRouter>

    );

}



export default App;

Здесь мы настроили два маршрута: главная страница (/) и страница "О нас" (/about). Теперь, когда маршруты готовы, можно переходить к использованию useNavigate.

Шаг 2: Использование useNavigate для возврата назад

Основная цель этой статьи — показать, как вернуться на предыдущую страницу. Для этого используем хук useNavigate.

Представьте, что вы хотите добавить кнопку "Назад" на страницу "О нас". Эта кнопка будет возвращать пользователя на главную страницу.

import React from "react";

import { useNavigate } from "react-router-dom";



function About() {

    const navigate = useNavigate();



    const goBack = () => {

        navigate(-1); // Переход на предыдущую страницу

    };



    return (

        <div>

            <h1>О нас</h1>

            <button onClick={goBack}>Назад</button>

        </div>

    );

}



export default About;

Здесь используется метод navigate(-1), который возвращает пользователя на предыдущую страницу. Если страницы нет (например, если пользователь открыл страницу в новой вкладке), метод ничего не делает.

Шаг 3: Обработка сложных сценариев

Бывают случаи, когда вам нужно выполнить проверку перед возвратом назад. Например, если пользователь заполнил форму, но не сохранил изменения, вы можете спросить его, действительно ли он хочет вернуться.

import React, { useState } from "react";

import { useNavigate } from "react-router-dom";



function About() {

    const navigate = useNavigate();

    const [isDirty, setIsDirty] = useState(true); // Представим, что есть несохраненные изменения



    const goBack = () => {

        if (isDirty) {

            const confirmLeave = window.confirm("У вас есть несохраненные изменения. Вы уверены, что хотите вернуться?");

            if (confirmLeave) {

                navigate(-1);

            }

        } else {

            navigate(-1);

        }

    };



    return (

        <div>

            <h1>О нас</h1>

            <p>Эта страница содержит важную информацию.</p>

            <button onClick={goBack}>Назад</button>

        </div>

    );

}



export default About;

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