# 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/pages/sab22tVAGIAv0NFq3eXL#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 %}
####
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://react-dsfr.codegouv.studio/routing.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.