πŸ”€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.

Follow the setup described in the getting started section:

Usage Examples

Client side routing

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

<Card
  linkProps={{
    to: "/my-page"
  }}
/>

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

External links:


linkProps={{
  href: "https://example.com"
  target="_blank"
}}

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


linkProps={{
  href: "mailto:[email protected]"
}}

Same goes for the mailto links.

Converting a link to a button

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

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

Last updated

Was this helpful?