# Integration with routing libs
Depending on the framework or routing library you are using, links between pages are not handled the same way.
Usually, you'll have a `` 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 `` component.
When registering your Link component, its props type will propagate to the react-dsfr API.
{% tabs %}
{% tab title="Next.js App router" %}
Follow the setup described in the getting started section:
{% embed url="" %}
**Usage Examples**
Client side routing
```tsx
import { Card } from "@codegouvfr/react-dsfr/Card";
```
The `` component from react-router will be used.
**External links:**
```tsx
linkProps={{
href: "https://example.com"
target="_blank"
}}
```
When react-dsfr detects that the `href` points to an external website it will use a regular `` instead of the `` component.
**Mailto links**
```tsx
linkProps={{
href: "mailto:contact@code.gouv.fr"
}}
```
Same goes for the mailto links.
**Converting a link to a button**
```tsx
linkProps={{
href: "#"
onClick: ()=> { /* ... */ }
}}
```
React-dsfr will automatically convert the underlying HTML element into a `` that looks like a link for better Accessibility.
{% endtab %}
{% tab title="Next.js Pages router" %}
{% hint style="info" %}
This is how you are instructed to set it up by default (no change from the [Initial setup](https://react-dsfr.codegouv.studio/readme#next.js) guide)
{% endhint %}
import type { AppProps } from "next/app";
import { fr } from "@codegouvfr/react-dsfr";
import { createNextDsfrIntegrationApi } from "@codegouvfr/react-dsfr/next-pagesdir";
import Link from "next/link";
// Only in TypeScript projects
declare module "@codegouvfr/react-dsfr/next-pagesdir" {
interface RegisterLink {
Link: typeof Link;
}
}
const {
withDsfr,
dsfrDocumentApi
} = createNextDsfrIntegrationApi({
defaultColorScheme: "system",
Link
});
export { dsfrDocumentApi };
function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default withDsfr(App);
Example [here](https://github.com/codegouvfr/react-dsfr/blob/main/test/integration/next-pagesdir/pages/_app.tsx).
**Examples**
Client side routing
```tsx
import { Card } from "@codegouvfr/react-dsfr/Card";
```
The `` component from react-router will be used.
**External links:**
```tsx
linkProps={{
href: "https://example.com"
target="_blank"
}}
```
When react-dsfr detects that the `href` points to an external website it will use a regular `` instead of the `` component.
**Mailto links**
```tsx
linkProps={{
to: "mailto:contact@code.gouv.fr"
}}
```
Same goes for the mailto links.
**Converting a link to a button**
```tsx
linkProps={{
to: "#"
onClick: ()=> { /* ... */ }
}}
```
React-dsfr will automatically convert the underlying HTML element into a `` that looks like a link for better Accessibility.
{% endtab %}
{% tab title="Tanstack" %}
Due to the fact that [@tanstack/react-router](https://tanstack.com/router/v1) is also implementing module augmentation it's just a tiny bit less straight forward to set up but it works great!
import React from "react";
import ReactDOM from "react-dom/client";
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
import { Link, type LinkProps } from "@tanstack/react-router";
startReactDsfr({
defaultColorScheme: "system",
Link
});
declare module '@codegouvfr/react-dsfr/spa' {
interface RegisterLink {
Link: (props: LinkProps) => JSX.Element
}
}
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
{/* ... */}
</React.StrictMode>
);
After that you will have type safety on the `linkProps`, you can use the to property as you would on the react router's `` component! \
Note that if you want to link to external website (or use `mailto:`) you can use the href property instead of the to property (see below).
If you have a link that is a `mailto:` or a link to an external page, use the `href` property instead of `to`. Example:
{% endtab %}
{% tab title="type-route" %}
[type-route](https://type-route.zilch.dev/) unlike most routing library doesn't export a `` component, `` are used directly.
In consequence there isn't anything to setup.
**Examples**
Client side routing
```tsx
import { Card } from "@codegouvfr/react-dsfr/Card";
import { routes } from "...";
```
Example [here](https://github.com/codegouvfr/react-dsfr/blob/e8b78dd5ad069a322fbcc34b34b25d4ac8214e34/test/integration/cra/src/index.tsx#L33).
{% endtab %}
{% tab title="react-router" %}
{% hint style="warning" %}
If you are starting a new project you might want to use [TanStack Router](#tanstack) in place of [react-router](https://reactrouter.com/en/main) as it is, at least in my opignion a much better routing library.
{% endhint %}
import React from "react";
import ReactDOM from "react-dom/client";
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
import { Link } from "react-router-dom";
startReactDsfr({
defaultColorScheme: "system",
Link
});
//Only in TypeScript projects
declare module "@codegouvfr/react-dsfr/spa" {
interface RegisterLink {
Link: typeof Link;
}
}
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
{/* ... */}
</React.StrictMode>
);
Everywhere a DSFR component accepts a `xxxLinkProps` you are expected to provide an object with a `to` property because `react-router`'s`` component expects a `to` prop instead of the typical href.\
\
You can find an example [here](https://github.com/codegouvfr/react-dsfr/blob/main/test/integration/vite/src/main.tsx).
**Examples**
Client side routing
```tsx
import { Card } from "@codegouvfr/react-dsfr/Card";
```
The `` component from react-router will be used.
**External links:**
```tsx
linkProps={{
to: "https://example.com"
target="_blank"
}}
```
When react-dsfr detects that the `to` points to an external website it will use a regular `` Instead of the `` component.
**Mailto links**
```tsx
linkProps={{
to: "mailto:contact@code.gouv.fr"
}}
```
Same goes for the mailto links.
**Converting a link to a button**
```tsx
linkProps={{
to: "#"
onClick: ()=> { /* ... */ }
}}
```
React-dsfr will automatically convert the underlying HTML element into a `` that looks like a link for better Accessibility.
{% endtab %}
{% tab title="Other" %}
You should be able to infer what needs to be done refering to the `react-router` instructions.
If the library you are using doesn't export a `` (like `type-route` for example) component, there isn't anything to do.
{% endtab %}
{% endtabs %}
####
