π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?