codegouvfr
pb d'utilisation du composant Pagination
Bonjour,
J'essaye d'intégrer le composant de pagination dans une page mais la doc manque d'info par rapport à l'utilisation de la prop getPageLinkProps
J'ai essayé de prendre exemple sur les stories d'exemple :
getPageLinkProps= {pageNumber => { return {href: /page/${pageNumber}}}}
Je n'ai pas d'erreur ts dans VSCode mais à la compilation nextjs me renvoi une erreur :
Error: Failed prop type: The prop hrefexpects astringorobjectin<Link>, but got undefined instead. at Array.forEach (<anonymous>) null
Une idée ?
Merci d'avance
Je viens de remarquer que si la prop defaultPage à une valeur > 1 alors le composant s'affiche
Je ne sais pas si le souci est résolu, mais voici un exemple d'utilisation dans une SPA : https://github.com/gip-inclusion/immersion-facile/blob/main/front/src/app/components/search/SearchListResults.tsx#L123
Error: Failed prop type: The prop href expects a string or object in, but got undefined instead. at Array.forEach (
) null
Je pense qu'il faudrait que j'en vois plus pour comprendre pourquoi dans ce cas, href est undefined.
oui le problème persiste, de ce que je comprends :
- Dans le
<Link />de NextJS href est required (cf doc) - Pour les liens first, previous, next & last dans le composant
<Pagination />on récupèregetPageLinkPropsconditionnellement pour pouvoir disable ces liens lorsqu'ils ne sont pas pertinents (en page 1 ou à la dernière page) (cf code) - Ce qui fait que le composant
<Link />n'a plus de href = Error - Info complémentaire, le CSS du dsfr cible bien les liens sans href pour appliquer les styles "disabled"
Du coup je pense que la solution est de remplacer le <Link /> par un <a> sans href si les conditions sont vraies...?
(cc @enguerranws)
oui, le problème persiste. Je m'en suis sorti en créant moi-même un composant de pagination en m'inspirant du vôtre: https://github.com/betagouv/preuve-covoiturage/blob/main/public/src/components/common/Pagination.tsx
merci @Datayama38 ,
ok tu remplaces l'élément <Link/> par des <p> quand le defaultPage a les valeurs concernées.
je vais proposer une PR, mais je pensais remplacer par des <a> sans href pour respecter strictement ce que fait le dsfr atm. (cf pagination dsfr)
@garronej un avis avant que je me lance ?
(cc @BrianRid)
merci @Datayama38 , ok tu remplaces l'élément
<Link/>par des<p>quand le defaultPage a les valeurs concernées.je vais proposer une PR, mais je pensais remplacer par des
<a>sans href pour respecter strictement ce que fait le dsfr atm. (cf pagination dsfr) @garronej un avis avant que je me lance ?(cc @BrianRid)
J'ai le meme problème et il faudrait aussi qu'on puisse ne pas avoir un Link mais un Button
J'essaye de l'utiliser avec le Datagrid de MUI et on récupère un onClick. Si c'est un Link, je vais etre obligé de mettre un href="#" qui sera pas magique ou alors de faire un e.preventDefault()
