Обработка кнопки возврата с помощью роутера React

Вы можете попробовать с двумя вариантами: вы можете использовать метод push или метод goBack из истории маршрутизатора. Обычно реквизиты истории доступны, если вы напрямую маршрутизируете компонент через метод Route или передаете реквизиты истории дочернему компоненту и используете его.

Пример кода приведен ниже

this.props.history.push('/') //this will go to home page

or

this.props.history.goBack() //this will go to previous page

Для вашей проблемы вы попробуйте метод push и дадите точный URL-адрес, по которому вы можете двигаться дальше.

Для получения дополнительной информации посетите https://reacttraining.com/react-router/web/api/history

Кнопка возврата в браузере работает с историей ваших маршрутов. Он не будет вызывать вашу программно управляемую маршрутизацию. Это та точка, где мы должны поддерживать стек истории с реагирующим маршрутизатором. Если вы находитесь на маршруте '/', нажмите '/home'. На кнопке возврата браузера появится '/home и вернется к '/'.

Даже если вы реализуете компонент Button для функции возврата и используете реагирующий маршрутизатор history props. Поверьте, вам нужно тщательно управлять своей навигацией, чтобы правильно поддерживать стек истории браузера. Таким образом, он ведет себя так же, как если бы вы нажимали кнопку браузера «Назад» или ваше приложение Button, чтобы вернуться или перейти вперед. Надеюсь, это будет полезно.

Я нашел решение. Это не красиво, но работает.

class Restaurant extends Component {
    constructor(props) {
        super(props);
        this.props.history.push('/');
        this.props.history.push(this.props.match.url);
    }
    ...

Что вы хотите:

Допустим, человек переходит на одну страницу вашего веб-сайта, например: www.yoursite.com/category/books/romeo-and-juliet.

На этой странице вы хотите отобразить кнопку «Назад», которая связывает вас с одним верхним каталогом: www.yoursite.com/category/books/

Это система хлебных крошек, которую мы, как известно, использовали на форумах vBulletin и тому подобном.

Вот простое решение:

let url = window.location.href;
let backButtonUrl = "";
if (url.charAt(url.length - 1) === "/") {
  backButtonUrl = url.slice(0, url.lastIndexOf("/"));
  backButtonUrl = backButtonUrl.slice(0, backButtonUrl.lastIndexOf("/"));
} else {
  backButtonUrl = url.slice(0, url.lastIndexOf("/"));
}

Что он в основном делает: 1. Получите текущий URL из браузера. 2. Проверьте, есть ли в конце ссылки символ «/» (косая черта). а. Если есть: уберите косую черту и удалите все до последней косой черты. б. Если нет: удалите все, последнюю косую черту.

Вы можете использовать {backButtonUrl} в качестве ссылки на кнопку «Назад».

Примечание: это не имеет ничего общего с React Router, историей и т. д. Примечание 2. Предполагая, что вы используете архитектуру ссылок вида www.site.com/word/letter/character.

Если вы хотите использовать его с библиотекой react-router-dom, вам нужно установить переменную url следующим образом:

let url = this.props.match.url;

Версия хуков (React 16.8+):

Минимальная версия.

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

export const Item = () => {
    let history = useHistory();
    return (
        <>
          <button onClick = {() => history.goBack()}>Back</button>
        </>
    );
};

Сегодня у меня была такая же проблема. У меня в одном из приложений, над которыми я работаю, есть следующий поток:

1. Пользователь заполняет регистрационную форму
2. Пользователь переходит на "страницу оплаты" кредитной карты.
3. Когда платеж прошел успешно, пользователь видит страницу «подтверждения платежа».

Я хочу запретить пользователям переходить со страницы «подтверждения платежа» (3) к любым предыдущим шагам в потоке платежей (1 и 2).

Лучше всего не использовать маршруты для управления отображаемым содержимым, а вместо этого использовать состояние. Если вы не можете себе этого позволить, Я нашел два практических способа решения проблемы:

1. Используя React-Router:

• Когда вы нажмете кнопку возврата, объект истории React Router будет выглядеть так:

• Когда вы переходите на любую страницу с помощью history.push, запишите страницу, которую вы посещаете, в состоянии
• Создайте декоратор, HOC или любой другой тип оболочки, который вы предпочитаете, для компонента Route React-Router. В этом компоненте: Если history.action === "POP" и "history.state.lastVisited === <some page with back navigation disabled>", то вы должны перенаправить своего пользователя на домашнюю страницу с помощью history.replace.

2. Другой способ сделать это - напрямую перейти на домашнюю страницу /: Используйте history.action, чтобы обнаружить, что использовалась кнопка «Назад», затем:

• Измените location.href так, чтобы оно соответствовало странице, которую вы хотите посетить
• Позвоните в location.reload(). Это перезагрузит приложение, и история будет сброшена.

Мы хотели что-то подобное для нашего приложения React, и, к сожалению, это было лучшее решение, которое мы придумали. Это особенно полезно, когда наши пользователи используют мобильные устройства и попадают на определенную страницу нашего сайта из рекламы или referrer.

Это наш основной файл routes.tsx.

 useEffect(() => {
    // The path that the user is supposed to go to
    const destinationPath = location.pathname;

    // If our site was opened in a new window or tab and accessed directly
    // OR the page before this one was NOT a page on our site, then...
    if (
      document.referrer === window.location.href ||
      document.referrer.indexOf(window.location.host) === -1
    ) {
      // Replaces the current pathname with the homepage
      history.replace("/");

      // Then pushes to the path the user was supposed to go to
      history.push(destinationPath);
    }
  }, []);

Теперь, когда пользователь нажимает кнопку «Назад», пользователь попадает на нашу домашнюю страницу, а не застревает на «вложенном» маршруте, по которому они находились.

ПРИМЕЧАНИЕ: В этой реализации есть некоторые небольшие особенности. Наше приложение также является приложением Кордова, поэтому нам НЕОБХОДИМО иметь собственную кнопку возврата. Эта реализация хорошо работает с нашей собственной кнопкой возврата, но, похоже, не работает с кнопкой возврата в собственном браузере; следовательно, это сработало для наших нужд.