Стек истории доступа Access React Router

Question

У меня есть приложение, в котором вы попадаете в список фотоальбомов различными способами (поиск, детализация по категориям и т. Д.).В альбоме вы открываете отдельные фотографии и просматриваете их, используя стрелки влево / вправо, а также различные инструменты редактирования.Каждое из действий итерации / инструмента выполняет history.push (), чтобы добавить маршрут в историю маршрутизатора.Я пытаюсь реализовать кнопку, которая вернется в то место в истории, до того, как вы начали просматривать отдельные фотографии.Чтобы сделать это, я бы хотел пройти стог истории назад до точки, где история соответствует 1 из нескольких паттернов, а затем сделать history.go (-14) (или что-то еще), чтобы вернуться к маршруту, который начал весьцепь.

Я искал код маршрутизатора React, а также объект истории HTML5, и я не вижу никакого способа прямого доступа к стеку истории, чтобы я мог вернуться к нему.Я бы предпочел не зависеть от того, чтобы каждое отдельное фото-действие выдвигало их путь в отдельное место, поскольку это делает его хрупким (каждое фото-действие создается другим разработчиком, и добавление новых действий в будущем потребует предыдущих знаний, чтобы помнить об этом.).

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

Есть предложения по доступу к стеку истории?

Answer 1

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

В моем собственном исследованииЯ не смог найти объект "history.stack", но есть обходной путь, который также указан здесь .По сути, вы устанавливаете счетчик goBack, который передается на следующий маршрут в качестве состояния местоположения.Затем вы можете вернуться обратно в стек, сколько бы раз ни говорил счетчик.

let goBack
if (history.location.state) {
    goBack = history.location.state.goBack
} else {
    goBack = -1
}

Вы можете передать состояние местоположения в React Link s, заменив опору to= объектом.

<Link to={
    { pathname: "/next/path", state: { goBack: goBack - 1 } }
}> Click Here! </Link>

Затем вы просто звоните history.go(history.location.state.goBack) всякий раз, когда вам нужно перейти к маршруту входа.

Если у вас есть возможность войти в один из измененных маршрутов, не нажимая на входной (например,пользователь копирует и вставляет URL-адрес, указывающий на одно изображение), затем вы можете добавить поведение по умолчанию.

if (history.location.state) {
    history.go(history.location.state.goBack)
} else {
    // You can add a default action if a user lands on route from an external link
    history.push('/base/url')
}

Это решение также может работать, если вам нужны более сложные способы поведения, такие как наличие маршрутов «контрольных точек», пропускающих любые маршруты.между тем, как вы вернетесь.Просто измените goBack на список чисел (представляющих промежутки между каждым прыжком назад), которые вы можете выдвигать каждый раз, когда возвращаетесь к контрольной точке.

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