Enable external links when using react-router

Author: garronej

src/link.tsx

@@ -19,7 +19,19 @@ let Link: (
 ) => ReturnType<React.FC> = props => <a {...props} />;
 
 export function setLink(params: { Link: typeof Link }): void {
-    Link = params.Link;
+    Link = props => {
+        external_link_react_router: {
+            const { to, ...rest } = props as { to?: string };
+
+            if (to === undefined || (!to.startsWith("//") && !/^https?:\/\//.test(to))) {
+                break external_link_react_router;
+            }
+
+            return <a href={to} target="_blank" {...rest} />;
+        }
+
+        return <params.Link {...props} />;
+    };
 }
 
 export function getLink() {

test/integration/vite/package.json

@@ -15,7 +15,7 @@
     "dependencies": {
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "react-router-dom": "^6.4.3",
+        "react-router-dom": "^6.8.1",
         "@mui/x-date-pickers": "^5.0.9",
         "@mui/icons-material": "^5.10.16",
         "dayjs": "^1.11.6",

test/integration/vite/src/Home.tsx

@@ -1,6 +1,6 @@
 import { Alert } from "@codegouvfr/react-dsfr/Alert";
 import { fr } from "@codegouvfr/react-dsfr";
-import { useIsDark } from "@codegouvfr/react-dsfr";
+import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
 
 export function Home() {
     const { isDark, setIsDark } = useIsDark();

test/integration/vite/src/Mui.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { createMuiDsfrThemeProvider } from "@codegouvfr/react-dsfr/mui";
+import { MuiDsfrThemeProvider } from "@codegouvfr/react-dsfr/mui";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
-import { useIsDark } from "@codegouvfr/react-dsfr";
+import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
 import Stack from '@mui/material/Stack';
@@ -43,8 +43,6 @@ const muiDefaultLightTheme = createTheme({
 	}
 });
 
-const { MuiDsfrThemeProvider } = createMuiDsfrThemeProvider();
-
 export function Mui() {
 
 	const { isDark, setIsDark } = useIsDark();

test/integration/vite/src/main.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { Home } from "./Home";
 import { Mui } from "./Mui";
-import { startReactDsfr } from "@codegouvfr/react-dsfr";
+import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
 import { Header } from "@codegouvfr/react-dsfr/Header";
 import { BrowserRouter } from "react-router-dom";
 import { Routes, Route, Link, useLocation } from "react-router-dom";
@@ -11,7 +11,7 @@ import { fr } from "@codegouvfr/react-dsfr";
 
 startReactDsfr({ "defaultColorScheme": "system", Link });
 
-declare module "@codegouvfr/react-dsfr" {
+declare module "@codegouvfr/react-dsfr/spa" {
     interface RegisterLink {
         Link: typeof Link;
     }
@@ -36,7 +36,7 @@ function Root() {
                 serviceTitle="Nom du site / service"
                 homeLinkProps={{ "to": "/", "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)" }}
                 quickAccessItems={[headerFooterDisplayItem]}
-                navItems={[
+                navigation={[
                     {
                         "text": "Home",
                         "linkProps": {
@@ -50,6 +50,13 @@ function Root() {
                             "to": "/mui"
                         },
                         "isActive": location.pathname === "/mui"
+                    },
+                    {
+                        "text": "External link",
+                        "linkProps": {
+                            "to": "https://example.fr"
+                        },
+                        "isActive": false
                     }
                 ]}
             />

test/integration/vite/yarn.lock

@@ -248,7 +248,7 @@
     to-fast-properties "^2.0.0"
 
 "@codegouvfr/react-dsfr@file:../../../dist":
-  version "0.3.0"
+  version "0.33.1"
   dependencies:
     tsafe "^1.4.0"
 
@@ -371,10 +371,10 @@
     react-transition-group "^4.4.5"
     rifm "^0.12.1"
 
-"@remix-run/router@1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.5.tgz#d5c65626add4c3c185a89aa5bd38b1e42daec075"
-  integrity sha512-my0Mycd+jruq/1lQuO5LBB6WTlL/e8DTCYWp44DfMTDcXz8DcTlgF0ISaLsGewt+ctHN+yA8xMq3q/N7uWJPug==
+"@remix-run/router@1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.3.2.tgz#58cd2bd25df2acc16c628e1b6f6150ea6c7455bc"
+  integrity sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA==
 
 "@types/prop-types@*", "@types/prop-types@^15.7.5":
   version "15.7.5"
@@ -798,20 +798,20 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-router-dom@^6.4.3:
-  version "6.4.5"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.4.5.tgz#4fdb12efef4f3848c693a76afbeaed1f6ca02047"
-  integrity sha512-a7HsgikBR0wNfroBHcZUCd9+mLRqZS8R5U1Z1mzLWxFXEkUT3vR1XXmSIVoVpxVX8Bar0nQYYYc9Yipq8dWwAA==
+react-router-dom@^6.8.1:
+  version "6.8.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.8.1.tgz#7e136b67d9866f55999e9a8482c7008e3c575ac9"
+  integrity sha512-67EXNfkQgf34P7+PSb6VlBuaacGhkKn3kpE51+P6zYSG2kiRoumXEL6e27zTa9+PGF2MNXbgIUHTVlleLbIcHQ==
   dependencies:
-    "@remix-run/router" "1.0.5"
-    react-router "6.4.5"
+    "@remix-run/router" "1.3.2"
+    react-router "6.8.1"
 
-react-router@6.4.5:
-  version "6.4.5"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.4.5.tgz#73f382af2c8b9a86d74e761a7c5fc3ce7cb0024d"
-  integrity sha512-1RQJ8bM70YEumHIlNUYc6mFfUDoWa5EgPDenK/fq0bxD8DYpQUi/S6Zoft+9DBrh2xmtg92N5HMAJgGWDhKJ5Q==
+react-router@6.8.1:
+  version "6.8.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.8.1.tgz#e362caf93958a747c649be1b47cd505cf28ca63e"
+  integrity sha512-Jgi8BzAJQ8MkPt8ipXnR73rnD7EmZ0HFFb7jdQU24TynGW1Ooqin2KVDN9voSC+7xhqbbCd2cjGUepb6RObnyg==
   dependencies:
-    "@remix-run/router" "1.0.5"
+    "@remix-run/router" "1.3.2"
 
 react-transition-group@^4.4.5:
   version "4.4.5"