Oppdaterer react-router-dom v6 til react-router v7

jest-setup.js

@@ -0,0 +1,3 @@
+import { TextEncoder } from 'util';
+
+global.TextEncoder = TextEncoder;

package.json

@@ -69,8 +69,7 @@
     "react": "^18.3.1",
     "react-collapse": "^5.0.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.3.0",
-    "react-router-hash-link": "^2.4.3",
+    "react-router": "^7.1.1",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.1",
     "ts-node": "^10.9.2",
@@ -95,8 +94,7 @@
     "@types/react": "18.3.1",
     "@types/react-collapse": "^5.0.1",
     "@types/react-dom": "^18.3.0",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/react-router-hash-link": "^2.4.5",
+    "@types/react-router": "^5.1.20",
     "@types/styled-components": "^5.1.14",
     "@types/uuid": "^10.0.0",
     "@types/webpack-env": "^1.18.0",
@@ -141,6 +139,7 @@
         "tsconfig": "<rootDir>/src/frontend/tsconfig.json"
       }
     },
+    "setupFiles": ["./jest-setup.js"],
     "moduleNameMapper": {
       "\\.(css|svg)$": "<rootDir>/src/mockFile.js"
     },

src/frontend/context/InstitusjonContext.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import createUseContext from 'constate';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import { useFelt, useSkjema } from '@navikt/familie-skjema';
 import type { Ressurs } from '@navikt/familie-typer';

src/frontend/context/ManuellJournalførContext.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import type { AxiosError } from 'axios';
 import createUseContext from 'constate';
 import { differenceInMilliseconds } from 'date-fns';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 
 import { useHttp } from '@navikt/familie-http';
 import type { Avhengigheter, FeltState } from '@navikt/familie-skjema';

src/frontend/context/OppgaverContext.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import type { AxiosError } from 'axios';
 import createUseContext from 'constate';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import type { SortState } from '@navikt/ds-react';
 import { useHttp } from '@navikt/familie-http';

src/frontend/context/SøknadContext.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import createUseContext from 'constate';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import type { Avhengigheter } from '@navikt/familie-skjema';
 import { feil, ok, useFelt, useSkjema } from '@navikt/familie-skjema';

src/frontend/context/behandlingContext/BehandlingContext.ts

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 import createUseContext from 'constate';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 
 import { RessursStatus } from '@navikt/familie-typer';
 

src/frontend/context/behandlingContext/HentOgSettBehandlingContext.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import type { AxiosError } from 'axios';
 import createUseContext from 'constate';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import { useHttp } from '@navikt/familie-http';
 import { byggFeiletRessurs, byggTomRessurs, type Ressurs } from '@navikt/familie-typer';

src/frontend/context/behandlingContext/useBehandlingApi.ts

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import type { AxiosError } from 'axios';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import { useHttp } from '@navikt/familie-http';
 import type { Ressurs } from '@navikt/familie-typer';

src/frontend/context/behandlingContext/useBehandlingssteg.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import { useHttp } from '@navikt/familie-http';
 import type { Ressurs } from '@navikt/familie-typer';

src/frontend/hooks/useSakOgBehandlingParams.test.tsx

@@ -6,7 +6,7 @@ import type { PropsWithChildren } from 'react';
 import React from 'react';
 
 import { renderHook } from '@testing-library/react';
-import { MemoryRouter as Router } from 'react-router-dom';
+import { MemoryRouter as Router } from 'react-router';
 
 import useSakOgBehandlingParams from './useSakOgBehandlingParams';
 

src/frontend/hooks/useSakOgBehandlingParams.ts

@@ -1,4 +1,4 @@
-import { useMatch } from 'react-router-dom';
+import { useMatch } from 'react-router';
 
 const useSakOgBehandlingParams = (): { fagsakId?: string; behandlingId?: string } => {
     const matchFagsakIdOgBehandlingId = useMatch('/fagsak/:fagsakId/:behandlingId/*');

src/frontend/hooks/useScrollTilAnker.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'react';
+
+import { useLocation } from 'react-router';
+
+export function useScrollTilAnker() {
+    const location = useLocation();
+    const lastHash = useRef('');
+
+    function scrollTilHash() {
+        if (location.hash) {
+            lastHash.current = location.hash.slice(1); // Alt utenom #
+        }
+
+        if (lastHash.current && document.getElementById(lastHash.current)) {
+            return setTimeout(() => {
+                document
+                    .getElementById(lastHash.current)
+                    ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                lastHash.current = '';
+            }, 100);
+        }
+    }
+
+    // Når location endrer seg uten en hard refresh
+    useEffect(() => {
+        const timeout = scrollTilHash();
+
+        // Clear timeout om komponenten denne effekten brukes i unmountes før timeouten kjøres
+        return () => clearTimeout(timeout);
+    }, [location]);
+
+    // Når vi kjører en hard refresh
+    useEffect(() => {
+        let timeout = setTimeout(() => {
+            const scrollTimeout = scrollTilHash();
+
+            if (scrollTimeout) {
+                timeout = scrollTimeout;
+            }
+        }, 500); // For å gi UIet tid til å rendres før vi finner og scroller til elementet
+
+        // Clear timeout om komponenten denne effekten brukes i unmountes før timeouten kjøres
+        return () => clearTimeout(timeout);
+    }, []);
+}

src/frontend/komponenter/Container.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
+import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router';
 import styled from 'styled-components';
 
 import FagsakContainer from './Fagsak/FagsakContainer';

src/frontend/komponenter/Fagsak/BehandlingRouter.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 
-import { Route, Routes, useLocation } from 'react-router-dom';
+import { Route, Routes, useLocation } from 'react-router';
 
 import Behandlingsresultat from './Behandlingsresultat/Behandlingsresultat';
 import Filtreringsregler from './Filtreringsregler/Filtreringsregler';

src/frontend/komponenter/Fagsak/Behandlingsresultat/Behandlingsresultat.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import styled from 'styled-components';
 
 import { PencilIcon } from '@navikt/aksel-icons';

src/frontend/komponenter/Fagsak/Dokumentutsending/Dokumentutsending.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import styled from 'styled-components';
 
 import { Button, Modal } from '@navikt/ds-react';

src/frontend/komponenter/Fagsak/FagsakContainer.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router';
 import styled from 'styled-components';
 
 import { Alert } from '@navikt/ds-react';
@@ -15,6 +15,7 @@ import { HentOgSettBehandlingProvider } from '../../context/behandlingContext/He
 import { DokumentutsendingProvider } from '../../context/DokumentutsendingContext';
 import { useFagsakContext } from '../../context/Fagsak/FagsakContext';
 import useSakOgBehandlingParams from '../../hooks/useSakOgBehandlingParams';
+import { useScrollTilAnker } from '../../hooks/useScrollTilAnker';
 
 const HovedInnhold = styled.div`
     height: calc(100vh - 3rem);
@@ -23,6 +24,7 @@ const HovedInnhold = styled.div`
 
 const FagsakContainer: React.FunctionComponent = () => {
     const { fagsakId } = useSakOgBehandlingParams();
+    useScrollTilAnker();
 
     const { bruker: brukerRessurs, minimalFagsak, hentMinimalFagsak } = useFagsakContext();
 

src/frontend/komponenter/Fagsak/Filtreringsregler/Filtreringsregler.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import styled from 'styled-components';
 
 import { BodyShort } from '@navikt/ds-react';

src/frontend/komponenter/Fagsak/Personlinje/Behandlingsmeny/HenleggBehandling/HenleggBehandling.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import styled from 'styled-components';
 
 import { BodyShort, Button, Fieldset, Link, Modal, Select, Textarea } from '@navikt/ds-react';

src/frontend/komponenter/Fagsak/Personlinje/Behandlingsmeny/LeggTilEllerFjernBrevmottakere/BrevmottakerSkjema.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import styled from 'styled-components';
 
 import { Alert, Button, Fieldset, Select, TextField } from '@navikt/ds-react';

src/frontend/komponenter/Fagsak/Personlinje/Behandlingsmeny/LeggTilEllerFjernBrevmottakere/LeggTilBrevmottakerModal.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import styled from 'styled-components';
 
 import { PlusCircleIcon } from '@navikt/aksel-icons';

src/frontend/komponenter/Fagsak/Personlinje/Behandlingsmeny/MenyvalgFagsak.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 
 import { Dropdown } from '@navikt/ds-react';
 

src/frontend/komponenter/Fagsak/Personlinje/Behandlingsmeny/OpprettBehandling/useOpprettBehandling.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import type { Avhengigheter, FeltState } from '@navikt/familie-skjema';
 import { feil, ok, useFelt, useSkjema } from '@navikt/familie-skjema';

src/frontend/komponenter/Fagsak/Simulering/Simulering.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import styled from 'styled-components';
 
 import { Alert } from '@navikt/ds-react';

src/frontend/komponenter/Fagsak/Vedtak/BehandlingSendtTilTotrinnskontrollModal.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import { BodyShort, Button, Modal } from '@navikt/ds-react';
 

src/frontend/komponenter/Fagsak/Vedtak/OppsummeringVedtak.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import styled from 'styled-components';
 
 import { Alert } from '@navikt/ds-react';

src/frontend/komponenter/Fagsak/Vilkårsvurdering/Vilkårsvurdering.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import classNames from 'classnames';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import styled from 'styled-components';
 
 import { ArrowsSquarepathIcon } from '@navikt/aksel-icons';

src/frontend/komponenter/Felleskomponenter/BrevmottakereAlert.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import styled from 'styled-components';
 
 import { MagnifyingGlassIcon } from '@navikt/aksel-icons';

src/frontend/komponenter/Felleskomponenter/HeaderMedSøk/FagsakDeltagerSøk.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import Endringslogg from '@navikt/familie-endringslogg';
 import type { ISøkeresultat } from '@navikt/familie-header';

src/frontend/komponenter/Felleskomponenter/HeaderMedSøk/useOpprettFagsak.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import { useHttp } from '@navikt/familie-http';
 import { RessursStatus } from '@navikt/familie-typer';

src/frontend/komponenter/Felleskomponenter/Hendelsesoversikt/BrevModul/Brev.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import styled from 'styled-components';
 
 import { Button, Modal } from '@navikt/ds-react';

src/frontend/komponenter/Felleskomponenter/Hendelsesoversikt/Totrinnskontroll/Totrinnskontroll.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import type { AxiosError } from 'axios';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import styled from 'styled-components';
 
 import { Button, Modal } from '@navikt/ds-react';

src/frontend/komponenter/Felleskomponenter/Skjemasteg/Skjemasteg.tsx

@@ -2,7 +2,7 @@ import type { PropsWithChildren } from 'react';
 import * as React from 'react';
 import { useEffect } from 'react';
 
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import styled from 'styled-components';
 
 import { Alert, Button, ErrorMessage, Heading } from '@navikt/ds-react';

src/frontend/komponenter/Felleskomponenter/TidslinjeVisualisering/TidslinjeVisualisering.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 
 import { endOfMonth } from 'date-fns';
-import { useMatch } from 'react-router-dom';
+import { useMatch } from 'react-router';
 import styled from 'styled-components';
 
 import { GlobeIcon as Eu, HouseIcon as NorwegianFlag } from '@navikt/aksel-icons';