Remove client-side transitions completely

With nextjs, internal links must be wrapped by a <Link> component to enable client-side transition. dsfr framework is broken with SPA, and the menu doesn't display on mobile after you click on a link. The hack in _app.jsx disables client side transitions completely.
openmaraude · Oct 4, 2021 · 7160caf · 7160caf
1 parent 687552b
commit 7160caf
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 27 deletions.
diff --git a/components/ButtonLink.jsx b/components/ButtonLink.jsx
@@ -2,11 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const ButtonLink = React.forwardRef(
-  ({ onClick, children, variant }, ref) => (
-    <button type="button" onClick={onClick} ref={ref} className={`fr-btn ${variant === "secondary" ? "fr-btn--secondary" : ""}`}>
-      { children }
-    </button>
-  ),
+  ({ onClick, children, variant }, ref) => {
+    const classes = ['fr-btn'];
+
+    if (variant === 'secondary') {
+      classes.push('fr-btn--secondary');
+    }
+
+    return (
+      <button type="button" onClick={onClick} ref={ref} className={classes.join(' ')}>
+        { children }
+      </button>
+    );
+  }
 );
 
 ButtonLink.defaultProps = {

diff --git a/components/QuestionSection.jsx b/components/QuestionSection.jsx
@@ -1,3 +1,5 @@
+import Link from 'next/link';
+
 import ButtonLink from '@/components/ButtonLink';
 
 import styles from '@/styles/components/QuestionSection.module.css';
@@ -8,9 +10,11 @@ export default function QuestionSection() {
       <div className="fr-container">
         <div className="fr-grid-row fr-grid-row--middle fr-grid-row--center">
           <h5>Vous avez des questions ?</h5>
-          <a className="fr-ml-3w" href="/faq">
-            <ButtonLink>Consltez la FAQ</ButtonLink>
-          </a>
+          <div className="fr-ml-3w">
+            <Link href="/faq" passHref>
+              <ButtonLink>Consltez la FAQ</ButtonLink>
+            </Link>
+          </div>
         </div>
       </div>
     </section>

diff --git a/layouts/BaseLayout.jsx b/layouts/BaseLayout.jsx
@@ -25,9 +25,11 @@ function Header() {
                   </p>
                 </div>
                 <div className="fr-header__operator">
-                  <a href="/">
-                    <img src="/images/icons/logo.svg" className="fr-responsive-img" style={{ maxWidth: '9.0625rem' }} alt="Logo le.taxi" />
-                  </a>
+                  <Link href="/" passHref>
+                    <a>
+                      <img src="/images/icons/logo.svg" className="fr-responsive-img" style={{ maxWidth: '9.0625rem' }} alt="Logo le.taxi" />
+                    </a>
+                  </Link>
                 </div>
                 <div className="fr-header__navbar">
                   <button className="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-menu" aria-haspopup="menu" title="Menu" type="button">
@@ -60,16 +62,24 @@ function Header() {
           <nav className="fr-nav" role="navigation" aria-label="Menu principal" id="header-navigation">
             <ul className="fr-nav__list">
               <li className="fr-nav__item">
-                <a href="/taxis_group" className="fr-nav__link" {...(router.asPath === "/taxis_group" ? { "aria-current": "page" } : {})}>Groupement de taxis</a>
+                <Link href="/taxis_group" passHref>
+                  <a className="fr-nav__link" {...(router.asPath === "/taxis_group" ? { "aria-current": "page" } : {})}>Groupement de taxis</a>
+                </Link>
               </li>
               <li className="fr-nav__item">
-                <a href="/taxi" className="fr-nav__link" {...(router.asPath === "/taxi" ? { "aria-current": "page" } : {})}>Artisan taxi</a>
+                <Link href="/taxi" passHref>
+                  <a className="fr-nav__link" {...(router.asPath === "/taxi" ? { "aria-current": "page" } : {})}>Artisan taxi</a>
+                </Link>
               </li>
               <li className="fr-nav__item">
-                <a href="/aom" className="fr-nav__link" {...(router.asPath === "/aom" ? { "aria-current": "page" } : {})}>Mobilité publique</a>
+                <Link href="/aom" passHref>
+                  <a className="fr-nav__link" {...(router.asPath === "/aom" ? { "aria-current": "page" } : {})}>Mobilité publique</a>
+                </Link>
               </li>
               <li className="fr-nav__item">
-                <a href="/maas" className="fr-nav__link" {...(router.asPath === "/maas" ? { "aria-current": "page" } : {})}>Application de mobilité</a>
+                <Link href="/maas" passHref>
+                  <a className="fr-nav__link" {...(router.asPath === "/maas" ? { "aria-current": "page" } : {})}>Application de mobilité</a>
+                </Link>
               </li>
             </ul>
           </nav>
@@ -85,13 +95,15 @@ function Footer() {
       <div className="fr-container">
         <div className="fr-footer__body">
           <div className="fr-footer__brand fr-enlarge-link">
-            <a href="/" title="Retour à l’accueil">
-              <p className="fr-logo" title="république française">
-                Ministère
-                <br />chargé des
-                <br />transports
-              </p>
-            </a>
+            <Link href="/" passHref>
+              <a title="Retour à l’accueil">
+                <p className="fr-logo" title="république française">
+                  Ministère
+                  <br />chargé des
+                  <br />transports
+                </p>
+              </a>
+            </Link>
           </div>
           <div className="fr-footer__content">
             <p className="fr-footer__content-desc">

diff --git a/pages/_app.jsx b/pages/_app.jsx
@@ -2,11 +2,35 @@
 
 import React from 'react';
 
+import { useRouter } from 'next/router';
+
 import '@/styles/globals.css';
 import '@gouvfr/dsfr/dist/css/dsfr.min.css';
 
 function MyApp({ Component, pageProps }) {
-  React.useEffect(() => import('@gouvfr/dsfr/src/main'));
+  const router = useRouter();
+
+  React.useEffect(() => import('@gouvfr/dsfr/src/main'), []);
+
+  /*
+   * Disable client-side transition.
+   *
+   * Framework dsfr is broken with SPA. If you attempt to load the page and
+   * click on the link, it is not possible to click on the menu on mobile.
+   *
+   * As a work around, we force a full browser reload on page change.
+   */
+  React.useEffect(() => {
+    const handleRouteChange = (url) => {
+      window.location.href = url;
+    };
+
+    router.events.on('routeChangeStart', handleRouteChange);
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChange);
+    };
+  }, []);
+
   return (
     <>
       <Component {...pageProps} />

diff --git a/pages/index.jsx b/pages/index.jsx
@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import Link from 'next/link';
 
 import BaseLayout from '@/layouts/BaseLayout';
 
@@ -60,7 +61,9 @@ function ChallengesSection() {
             <div className="fr-card fr-enlarge-link fr-pt-3w">
               <div className="fr-card__body">
                 <h4 className="fr-card__title">
-                  <a href="/taxi" className="fr-card__link">Artisan taxi</a>
+                  <Link href="/taxi" passHref>
+                    <a className="fr-card__link">Artisan taxi</a>
+                  </Link>
                 </h4>
                 <p className="fr-card__desc">Recevez de nouvelles courses lorsque vous êtes en maraude</p>
               </div>
@@ -74,7 +77,9 @@ function ChallengesSection() {
             <div className="fr-card fr-enlarge-link fr-pt-3w">
               <div className="fr-card__body">
                 <h4 className="fr-card__title">
-                  <a href="/taxis_group" className="fr-card__link">Groupement de taxis</a>
+                  <Link href="/taxis_group" passHref>
+                    <a className="fr-card__link">Groupement de taxis</a>
+                  </Link>
                 </h4>
                 <p className="fr-card__desc">Connectez vos taxis à tous les usagers</p>
               </div>
@@ -88,7 +93,9 @@ function ChallengesSection() {
             <div className="fr-card fr-enlarge-link fr-pt-3w">
               <div className="fr-card__body">
                 <h4 className="fr-card__title">
-                  <a href="/maas" className="fr-card__link">Application de mobilité</a>
+                  <Link href="/maas" passHref>
+                    <a className="fr-card__link">Application de mobilité</a>
+                  </Link>
                 </h4>
                 <p className="fr-card__desc">Proposez aussi les taxis dans votre application grand public</p>
               </div>
@@ -102,7 +109,9 @@ function ChallengesSection() {
             <div className="fr-card fr-enlarge-link fr-pt-3w">
               <div className="fr-card__body">
                 <h4 className="fr-card__title">
-                  <a href="/aom" className="fr-card__link">Mobilité publique</a>
+                  <Link href="/aom" passHref>
+                    <a className="fr-card__link">Mobilité publique</a>
+                  </Link>
                 </h4>
                 <p className="fr-card__desc">Intégrez le service public des taxis à votre offre locale</p>
               </div>