Symfony, Twig, knp paginator for GET ?=value to obtain value/value

Question

I'm currently learning how to deal with knp paginantor, how may I could swap my ?page=2 to value/value URL? I'm using the knp pagination
currenty url looks like : loli/page/?page=2
what I want : loli/page/2

here is my first controller, default one :

#[Route('/', name: 'index', methods: ['GET'])]
public function main(Request $request, ImageRepository $image, PaginatorInterface $paginator): Response
{
    $images = $paginator->paginate(
        $image->findBy([], ['id' => 'DESC']),
        $request->query->getInt('page', 1), /*page number*/ 8 /*limit per page*/
    );

    return $this->render('pages/main.html.twig', compact('images')); 
}

here is my controller :

#[Route('/loli/page/', name: 'loli', methods: ['GET'])]
public function mainPaginate(Request $request, ImageRepository $image, PaginatorInterface $paginator): Response
{
    $images = $paginator->paginate(
        $image->findBy([], ['id' => 'DESC']),
        $request->query->getInt('page', 1), /*page number*/ 8 /*limit per page*/
    );

    return $this->render('pages/main.html.twig', compact('images')); 
}

I tried to use {page} as slug tho, and even to use a split filter in twig, the URL got changed correctly, like loli/page/2 however the content dosn't show, using by default last page for each ones.

here is my main.html.twig, the pagination goes to my paginate.html.twig

{% for image in images %}

    {% if compteur == 0 %}

    <div class="row-images">

    {% endif %}

        <div class="show-images">
            <img src="{{ asset('assets/images/loli/' ~ image.name)}}" alt="{{ image.name }}">
            <p>{{ image.createdAt|date('d/m/Y') }}</p>
            <a href="#">List Type : {{ image.type }}</a>
            <a href="#">Gender : {{ image.gender }}</a>
        </div>

    {% set compteur = compteur + 1 %}

    {% if (compteur % 4 == 0) %}

        {% set compteur = 0 %}

        </div>

    {% endif %}

{% endfor %}

<div id="navigation">
    {{ knp_pagination_render(images, 'pages/paginate/paginate.html.twig') }}
</div>

{% endblock %}

paginate.html.twig

{% if pageCount > 1 %}

<nav aria-label="Pagination">

    {% set classAlign = (align is defined) ? " text-#{align}" : '' %}

    <ul class="pagination{{ classAlign }}">

        {% if previous is defined %}
            <li><a rel="prev" href="{{ path('app_main_loli', query|merge({(pageParameterName): previous})) }}">
                    {{ '-'|trans({}, 'KnpPaginatorBundle') }}</a></li>
        {% else %}
            <li style="display: none;"><a class="disabled">{{ '-'|trans({}, 'KnpPaginatorBundle') }}</a></li>
        {% endif %}

        {% if startPage > 1 %}
            <li><a href="{{ path('app_main_loli', query|merge({(pageParameterName): 1})) }}">1</a></li>

            {% if startPage == 3 %}
                <li><a href="{{ path('app_main_loli', query|merge({(pageParameterName): 2})) }}">2</a></li>
            {% elseif startPage != 2 %}
                <li class="ellipsis"></li>
            {% endif %}

        {% endif %}

        {% for page in pagesInRange %}
            {% if page != current %}
                <li><a href="{{ path('app_main_loli', query|merge({(pageParameterName): page})) }}">
                        {{ page }}</a></li>
            {% else %}
                {# <li class="current">{{ page }}</li> #}
            {% endif %}
        {% endfor %}

        {% if pageCount > endPage %}
            {% if pageCount > (endPage + 1) %}
                {% if pageCount > (endPage + 2) %}
                    <li class="ellipsis"></li>
                {% else %}
                    <li><a href="{{ path('app_main_loli', query|merge({(pageParameterName): (pageCount - 1)})) }}">
                        {{ pageCount -1 }}</a></li>
                {% endif %}
            {% endif %}
    
            <li><a href="{{ path('app_main_loli', query|merge({(pageParameterName): pageCount})) }}">{{ pageCount }}</a></li>
        {% endif %}

        {% if next is defined %}
            <li><a rel="next" href="{{ path('app_main_loli', query|merge({(pageParameterName): next})) }}">
                    {{ '+'|trans({}, 'KnpPaginatorBundle') }}</a></li>
        {% else %}
            <li style="display: none;" class="disabled">{{ '+'|trans({}, 'KnpPaginatorBundle') }}</li>
        {% endif %}

    </ul>

</nav>

{% endif %}

Answer 1

#[Route('/loli/page/{number}', name: 'loli', methods: ['GET'])] 
public function mainPaginate(int $number, Request $request, ImageRepository $image, PaginatorInterface $paginator): Response {
$images = $paginator->paginate(
    $image->findBy([], ['id' => 'DESC']),
    $number ?? 1, /*page number*/ 8 /*limit per page*/
);

return $this->render('pages/main.html.twig', compact('images'));}

and also change {{ path('app_main_loli', {'number': fillWithPageNumber}) }} But I'm sure you will not need that in feature.