Hx-push-url не работает при нажатии кнопки назад

Я пытаюсь интегрировать Htmx с django и добиться поведения одностраничного приложения. Я переписываю приложение опроса Djangoproject.com с помощью htmx. Когда я нажимаю на ссылку подробной страницы, содержимое загружается, htmx вводит новый url в адресную строку. Когда я нажимаю кнопку назад, то в первый раз я прекрасно перешел на индексную страницу, после этого, если я снова перехожу на детальную страницу и нажимаю кнопку назад, то url показывает индекс, содержимое индексной страницы не загружается, содержимое остается таким же, как и на детальной странице. Вот мой код

views.py

def index(request):
    latest_question_list = Question.objects.filter(pub_date__lte=timezone.now()).order_by('-pub_date')[:5]
    context = {'latest_question_list': latest_question_list}
    if request.headers.get("Hx-Request") is not None:
        return render(request, 'main/index/index.html', context)
    else:
        return render(request, 'main/index/index-full.html', context)
    
    
def detail(request, question_id):
    question = get_object_or_404(Question, pk=question_id)
    print(request.headers.get("Hx-Request"))
    if request.headers.get("Hx-Request") is not None:
        return render(request, 'main/detail/detail.html', {'question': question})
    else:
        return render(request, 'main/detail/detail-full.html', {'question': question})
    

index.html

<div id="index" class="">

    {% if latest_question_list %}
    <ul>
        {% for question in latest_question_list %}
        <li><div class="has-text-link" hx-get="{% url 'main:detail' question.id %}" hx-push-url="true" hx-target="#index" hx-swap="outerHTML">{{ question.question_text }}</div></li>
        {% endfor %}
    </ul>
    {% else %}
    <p>
        No polls are available.
    </p>
    {% endif %}

</div>

index-full.html

{% extends 'base.html' %}
{% block content %}
{% include 'main/index/index.html' %}
{% endblock content %}

detail.html

<div id="detail" class="">

    <form action="{% url 'main:vote' question.id %}" method="post">
        {% csrf_token %}
        <fieldset>
            <legend><h1>{{ question.question_text }}</h1></legend>
            {% if error_message %}<p>
                <strong>{{ error_message }}</strong>
            </p>
            {% endif %}
            {% for choice in question.choice_set.all %}
            <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
            <label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br>
            {% endfor %}
        </fieldset>
        <input type="submit" value="Vote">
    </form>

</div>


detail-full.html

{% extends 'base.html' %}
{% block content %}
{% include 'main/detail/detail.html %}
{% endblock content %}

Я не нашел ошибки в консоли браузера, нет ошибки в терминале

Теперь я знаю, что могу поместить кнопку назад на детальной странице, которая может перевести меня на индексную страницу. Но пользователь не будет использовать эту кнопку, он просто воспользуется кнопкой назад на своем устройстве.

Добавив этот код javascript, вы можете перезагрузить страницу, когда пользователь нажимает кнопку назад:

var auxBack = performance.getEntriesByType("navigation");

if (auxBack[0].type === "back_forward") {
    location.reload(true);
}
Вернуться на верх