Skip to content

Commit 7160caf

Browse files
brmzkwbrmzkw
committed
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.
1 parent 687552b commit 7160caf

File tree

5 files changed

+84
-27
lines changed

5 files changed

+84
-27
lines changed

‎components/ButtonLink.jsx

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,19 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33

44
const ButtonLink = React.forwardRef(
5-
({ onClick, children, variant }, ref) => (
6-
<button type="button" onClick={onClick} ref={ref} className={`fr-btn ${variant === "secondary" ? "fr-btn--secondary" : ""}`}>
7-
{ children }
8-
</button>
9-
),
5+
({ onClick, children, variant }, ref) => {
6+
const classes = ['fr-btn'];
7+
8+
if (variant === 'secondary') {
9+
classes.push('fr-btn--secondary');
10+
}
11+
12+
return (
13+
<button type="button" onClick={onClick} ref={ref} className={classes.join(' ')}>
14+
{ children }
15+
</button>
16+
);
17+
}
1018
);
1119

1220
ButtonLink.defaultProps = {

‎components/QuestionSection.jsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import Link from 'next/link';
2+
13
import ButtonLink from '@/components/ButtonLink';
24

35
import styles from '@/styles/components/QuestionSection.module.css';
@@ -8,9 +10,11 @@ export default function QuestionSection() {
810
<div className="fr-container">
911
<div className="fr-grid-row fr-grid-row--middle fr-grid-row--center">
1012
<h5>Vous avez des questions ?</h5>
11-
<a className="fr-ml-3w" href="/faq">
12-
<ButtonLink>Consltez la FAQ</ButtonLink>
13-
</a>
13+
<div className="fr-ml-3w">
14+
<Link href="/faq" passHref>
15+
<ButtonLink>Consltez la FAQ</ButtonLink>
16+
</Link>
17+
</div>
1418
</div>
1519
</div>
1620
</section>

‎layouts/BaseLayout.jsx

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,11 @@ function Header() {
2525
</p>
2626
</div>
2727
<div className="fr-header__operator">
28-
<a href="/">
29-
<img src="/images/icons/logo.svg" className="fr-responsive-img" style={{ maxWidth: '9.0625rem' }} alt="Logo le.taxi" />
30-
</a>
28+
<Link href="/" passHref>
29+
<a>
30+
<img src="/images/icons/logo.svg" className="fr-responsive-img" style={{ maxWidth: '9.0625rem' }} alt="Logo le.taxi" />
31+
</a>
32+
</Link>
3133
</div>
3234
<div className="fr-header__navbar">
3335
<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() {
6062
<nav className="fr-nav" role="navigation" aria-label="Menu principal" id="header-navigation">
6163
<ul className="fr-nav__list">
6264
<li className="fr-nav__item">
63-
<a href="/taxis_group" className="fr-nav__link" {...(router.asPath === "/taxis_group" ? { "aria-current": "page" } : {})}>Groupement de taxis</a>
65+
<Link href="/taxis_group" passHref>
66+
<a className="fr-nav__link" {...(router.asPath === "/taxis_group" ? { "aria-current": "page" } : {})}>Groupement de taxis</a>
67+
</Link>
6468
</li>
6569
<li className="fr-nav__item">
66-
<a href="/taxi" className="fr-nav__link" {...(router.asPath === "/taxi" ? { "aria-current": "page" } : {})}>Artisan taxi</a>
70+
<Link href="/taxi" passHref>
71+
<a className="fr-nav__link" {...(router.asPath === "/taxi" ? { "aria-current": "page" } : {})}>Artisan taxi</a>
72+
</Link>
6773
</li>
6874
<li className="fr-nav__item">
69-
<a href="/aom" className="fr-nav__link" {...(router.asPath === "/aom" ? { "aria-current": "page" } : {})}>Mobilité publique</a>
75+
<Link href="/aom" passHref>
76+
<a className="fr-nav__link" {...(router.asPath === "/aom" ? { "aria-current": "page" } : {})}>Mobilité publique</a>
77+
</Link>
7078
</li>
7179
<li className="fr-nav__item">
72-
<a href="/maas" className="fr-nav__link" {...(router.asPath === "/maas" ? { "aria-current": "page" } : {})}>Application de mobilité</a>
80+
<Link href="/maas" passHref>
81+
<a className="fr-nav__link" {...(router.asPath === "/maas" ? { "aria-current": "page" } : {})}>Application de mobilité</a>
82+
</Link>
7383
</li>
7484
</ul>
7585
</nav>
@@ -85,13 +95,15 @@ function Footer() {
8595
<div className="fr-container">
8696
<div className="fr-footer__body">
8797
<div className="fr-footer__brand fr-enlarge-link">
88-
<a href="/" title="Retour à l’accueil">
89-
<p className="fr-logo" title="république française">
90-
Ministère
91-
<br />chargé des
92-
<br />transports
93-
</p>
94-
</a>
98+
<Link href="/" passHref>
99+
<a title="Retour à l’accueil">
100+
<p className="fr-logo" title="république française">
101+
Ministère
102+
<br />chargé des
103+
<br />transports
104+
</p>
105+
</a>
106+
</Link>
95107
</div>
96108
<div className="fr-footer__content">
97109
<p className="fr-footer__content-desc">

‎pages/_app.jsx

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,35 @@
22

33
import React from 'react';
44

5+
import { useRouter } from 'next/router';
6+
57
import '@/styles/globals.css';
68
import '@gouvfr/dsfr/dist/css/dsfr.min.css';
79

810
function MyApp({ Component, pageProps }) {
9-
React.useEffect(() => import('@gouvfr/dsfr/src/main'));
11+
const router = useRouter();
12+
13+
React.useEffect(() => import('@gouvfr/dsfr/src/main'), []);
14+
15+
/*
16+
* Disable client-side transition.
17+
*
18+
* Framework dsfr is broken with SPA. If you attempt to load the page and
19+
* click on the link, it is not possible to click on the menu on mobile.
20+
*
21+
* As a work around, we force a full browser reload on page change.
22+
*/
23+
React.useEffect(() => {
24+
const handleRouteChange = (url) => {
25+
window.location.href = url;
26+
};
27+
28+
router.events.on('routeChangeStart', handleRouteChange);
29+
return () => {
30+
router.events.off('routeChangeStart', handleRouteChange);
31+
};
32+
}, []);
33+
1034
return (
1135
<>
1236
<Component {...pageProps} />

‎pages/index.jsx

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Image from 'next/image';
2+
import Link from 'next/link';
23

34
import BaseLayout from '@/layouts/BaseLayout';
45

@@ -60,7 +61,9 @@ function ChallengesSection() {
6061
<div className="fr-card fr-enlarge-link fr-pt-3w">
6162
<div className="fr-card__body">
6263
<h4 className="fr-card__title">
63-
<a href="/taxi" className="fr-card__link">Artisan taxi</a>
64+
<Link href="/taxi" passHref>
65+
<a className="fr-card__link">Artisan taxi</a>
66+
</Link>
6467
</h4>
6568
<p className="fr-card__desc">Recevez de nouvelles courses lorsque vous êtes en maraude</p>
6669
</div>
@@ -74,7 +77,9 @@ function ChallengesSection() {
7477
<div className="fr-card fr-enlarge-link fr-pt-3w">
7578
<div className="fr-card__body">
7679
<h4 className="fr-card__title">
77-
<a href="/taxis_group" className="fr-card__link">Groupement de taxis</a>
80+
<Link href="/taxis_group" passHref>
81+
<a className="fr-card__link">Groupement de taxis</a>
82+
</Link>
7883
</h4>
7984
<p className="fr-card__desc">Connectez vos taxis à tous les usagers</p>
8085
</div>
@@ -88,7 +93,9 @@ function ChallengesSection() {
8893
<div className="fr-card fr-enlarge-link fr-pt-3w">
8994
<div className="fr-card__body">
9095
<h4 className="fr-card__title">
91-
<a href="/maas" className="fr-card__link">Application de mobilité</a>
96+
<Link href="/maas" passHref>
97+
<a className="fr-card__link">Application de mobilité</a>
98+
</Link>
9299
</h4>
93100
<p className="fr-card__desc">Proposez aussi les taxis dans votre application grand public</p>
94101
</div>
@@ -102,7 +109,9 @@ function ChallengesSection() {
102109
<div className="fr-card fr-enlarge-link fr-pt-3w">
103110
<div className="fr-card__body">
104111
<h4 className="fr-card__title">
105-
<a href="/aom" className="fr-card__link">Mobilité publique</a>
112+
<Link href="/aom" passHref>
113+
<a className="fr-card__link">Mobilité publique</a>
114+
</Link>
106115
</h4>
107116
<p className="fr-card__desc">Intégrez le service public des taxis à votre offre locale</p>
108117
</div>

0 commit comments

Comments
 (0)