๐Ÿ”€Integration with routing libs

Like react-router or Next.js file system based route.

Depending on the framework or routing library you are using, links between pages are not handled the same way.

Usually, you'll have a <Link /> component provided by your routing library of choice. You need to let react-dsfr know about it so that whenever a link is needed in a DSFR component, you can provide the correct props for your <Link /> component.

When registering your Link component, its props type will propagate to the react-dsfr API.

This is how you are instructed to set it up by default (no change from the Initial setup guide)

"use client";

import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
import { defaultColorScheme } from "./defaultColorScheme";
import Link from "next/link";

declare module "@codegouvfr/react-dsfr/next-appdir" {
    interface RegisterLink { 
        Link: typeof Link;


export default function StartDsfr(){
        //Yes, leave null here.
	return null;


Client side routing

import { Card }ย from "@codegouvfr/react-dsfr/Card";

    to: "/my-page"

The <Link /> component from react-router will be used.

External links:

  href: "https://example.com"

When react-dsfr detects that the href points to an external website it will use a regular <a/> instead of the <Link /> component.

Mailto links

  href: "mailto:contact@code.gouv.fr"

Same goes for the mailto links.

Converting a link to a button

  href: "#"
  onClick: ()=> { /* ... */ }

React-dsfr will automatically convert the underlying HTML element into a <button /> that looks like a link for better Accessibility.

Last updated


2022-2023 Pรดle logiciel libre d'Etalab - MIT license