quickAccessItems in Header component

[gBoole01]

Dans le composant Header, les quickAccessItems ne sont pas entièrement fonctionnels.

Après avoir créé des composants comme ici (exemple ci-dessous), le quickAccessItem fonctionne en version Desktop mais fait crash la page lorsqu'on l'utilise en version Mobile.

function LoginQuickAccessItem() {
    const navigate = useNavigate();
    return (
        <HeaderQuickAccessItem
            quickAccessItem={{
                buttonProps: {
                    onClick: () => navigate(ROUTES.LOGIN),
                },
                iconId: 'fr-icon-account-circle-line',
                text: 'Se connecter',
            }}
        />
    );
}

Le seul message d'erreur de la console est le suivant.

dsfr : HeaderLinks # -  header__tools-links content is different from header__menu-links content.As you're using a dynamic framework, you should handle duplication of this content yourself, please refer to documentation:https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/en-tete

J'utilise react.js avec vite et react-router-dom pour la navigation. Je n'ai trouvé aucune information sur la manière de gérer la duplication de contenu dans la documentation.

[garronej]

Salut @gBoole01,
Tu implémente actuellement les instructions pour Next.js App Router dans ton App Vite.
De plus il y a une intégration react-router que tu n'a peut être pas mis en place.

Dans ton cas c'est très simple:

                <Header
                    ...
                    quickAccessItems={[
                        {
                            iconId: "fr-icon-account-circle-line",
                            linkProps: {
                                to: ROUTES.LOGIN
                            },
                            text: 'Se connecter'
                        }
                    ]}

Dis moi si l'erreur persiste après ça. On peut prévoir un apelle pour te débloquer au besoin.

[gBoole01]

Hello @garronej 👋🏻

Effectivement, j'avais manqué une étape sur l'intégration react-router, je ne passais pas le Link dans les arguments de startReactDsfr.

En revanche, j'ai toujours l'erreur suivante dans la console.

dsfr : HeaderLinks # - header__tools-links content is different from header__menu-links content.As you're using a dynamic framework, you should handle duplication of this content yourself, please refer to documentation:https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/en-tete

Le lien vers la documentation ne semble pas indiquer de manière de gérer la duplication de contenu.

L'erreur n'est cependant pas bloquante et mon ticket est résolu grâce à toi ! Je te remercie 😄

[garronej]

Actually fixed now (error message)