Integration with routing libs
Like react-router or Next.js file system based route.
Last updated
Was this helpful?
Like react-router or Next.js file system based route.
Last updated
Was this helpful?
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.
Examples
Client side routing
The <Link />
component from react-router will be used.
External links:
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
Same goes for the mailto links.
Converting a link to a button
React-dsfr will automatically convert the underlying HTML element into a <button />
that looks like a link for better Accessibility.
This is how you are instructed to set it up by default (no change from the guide)
Example .
Due to the fact that is also implementing module augmentation it's just a tiny bit less straight forward to set up but it works great!
unlike most routing library doesn't export a <Link />
component, <a />
are used directly.
Example .
If you are starting a new project you might want to use in place of as it is, at least in my opignion a much better routing library.
Everywhere a DSFR component accepts a xxxLinkProps
you are expected to provide an object with a to
property because react-router
's<Link />
component expects a to
prop instead of the typical href.
You can find an example .