Necesitas "emitir" el número de la página desde el componente B, hacia el A, que es su componente padre, puedes usar props.
Tienes 4 ejemplos progresivos con uso de hooks de como se haría: https://codesandbox.io/s/determined-lederberg-mgjdu El último es lo que más se aproxima a lo que necesitas. Usa useState()
para guardar el número de página en el componente B, al tiempo que lo envía al componente A.
En cuanto al código, en el componente B tendrías:
const page = pageNumber < props.firstPageNumber
? props.firstPageNumber : pageNumber;
// NOTE: emit page number
props.emitPageNumber(page);
dentro de una función que recibe el número de página pageNumber
de los botones "Atrás" y "Adelante". Le paso por props al componente: firstPageNumber
que estoy usando para que si la primera página en la número 1, el número de página nunca sea inferior a 1. Otra opción es usarlo para deshabilitar u ocultar el botón "Atrás".
En el componente A, recoges el número de página, con el atributo del componente:
emitPageNumber={(page) => { handlePageNumberEmit(page) }}
que se lo esta enviado a la función handlePageNumberEmit()
.
Como vas a ir actualizando la URL que esta en A cada vez que se cambie en B, tendrás que mantener el número de página en el estado de A, y enviarlo por *props* cada vez a B. Es decir que B siempre recibe por *props* el número de página actual (no sólo el de la primera página), y cuando se pulsa uno de los botones (Atras / Adelante) envía este número + o - 1, según el caso, al componente A, por *props* que lo guardara en su estado.