feat(deps): react-router v8 migration (fix GHSA-qwww-vcr4-c8h2)

.github/scripts/audit-gate.mjs

@@ -11,10 +11,7 @@ import { execSync } from 'node:child_process';
 
 // Begründete Ausnahmen: GHSA-ID -> Grund + Datum. Jede Zeile muss auch in .trivyignore
 // gespiegelt sein (Trivy-Gate) und via Dependabot-Alert-Dismiss abgedeckt werden.
-const ALLOWLIST = {
-  'GHSA-QWWW-VCR4-C8H2':
-    'react-router RSC-only CSRF (CWE-352); TaskWolf ist Client-SPA (createBrowserRouter, kein RSC/SSR) -> nicht ausnutzbar. Fix nur in react-router 8.3.0 (Major); v8-Migration geplant, 2026-07-29',
-};
+const ALLOWLIST = {};
 
 const BLOCK = new Set(['high', 'critical']);
 const GHSA_RE = /GHSA-[a-z0-9]{4,}-[a-z0-9]{4,}-[a-z0-9]{4,}/i;

.github/workflows/ci.yml

@@ -47,7 +47,8 @@ jobs:
 
       - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020   # v7.0.0
         with:
-          node-version: '20'
+          # react-router v8 requires Node >= 22.22 at build time.
+          node-version: '22'
           cache: 'npm'
           cache-dependency-path: frontend/package-lock.json
 

.trivyignore

@@ -1,9 +1,2 @@
 # Begründete Ausnahmen. Format pro Zeile: CVE-ID  # Grund + Datum
 # z.B.: CVE-2024-12345  # nicht ausnutzbar (Komponente ungenutzt), 2026-06-28
-
-# react-router GHSA-qwww-vcr4-c8h2 (CSRF, CWE-352, CVSS 7.1): betrifft AUSSCHLIESSLICH
-# den unstable RSC-Modus (React Server Components). TaskWolf-Frontend ist eine reine
-# Client-SPA (createBrowserRouter, kein SSR/RSC, keine unstable_ APIs) -> Code-Pfad
-# ungenutzt, nicht ausnutzbar. Fix nur in react-router 8.3.0 (Major, react-router-dom
-# in v8 aufgelöst). Auflösung geplant via v8-Migration -> docs/superpowers/plans/2026-07-29-react-router-v8-migration.md
-GHSA-qwww-vcr4-c8h2  # RSC-only CSRF, Client-SPA nicht betroffen, 2026-07-29

frontend/package.json

@@ -41,7 +41,7 @@
     "react-dom": "^19.0.0",
     "react-grid-layout": "^2.2.3",
     "react-i18next": "^17.0.9",
-    "react-router-dom": "^7.18.1",
+    "react-router": "^8.3.1",
     "recharts": "^3.9.2",
     "tailwind-merge": "^3.6.0",
     "zustand": "^5.0.14"

frontend/src/app/router.tsx

@@ -1,4 +1,4 @@
-import { createBrowserRouter, Navigate } from 'react-router-dom'
+import { createBrowserRouter, Navigate } from 'react-router'
 import { AuthLayout } from '@/layouts/AuthLayout'
 import { AppLayout } from '@/layouts/AppLayout'
 import { LoginPage } from '@/pages/auth/LoginPage'

frontend/src/components/dashboard/IssueListWidget.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import { apiClient } from '@/api/client'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import type { Issue, Page } from '@/types'
 import { useTranslation } from 'react-i18next'
 

frontend/src/components/issue/IssueDetailContent.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { useTranslation } from 'react-i18next'
 import { useIssue, useUpdateIssue } from '@/hooks/useIssues'
 import { useMe } from '@/hooks/useAuth'

frontend/src/components/issue/IssueDialog.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { IssueDetailContent } from '@/components/issue/IssueDetailContent'
 
 interface Props {

frontend/src/components/issue/IssueDialogHost.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react'
-import { useSearchParams, useMatch } from 'react-router-dom'
+import { useSearchParams, useMatch } from 'react-router'
 import { IssueDialog } from '@/components/issue/IssueDialog'
 
 interface Props { projectKey: string }

frontend/src/components/nav/NavItem.tsx

@@ -1,4 +1,4 @@
-import { NavLink } from 'react-router-dom'
+import { NavLink } from 'react-router'
 import type { LucideIcon } from 'lucide-react'
 
 export interface NavItemProps {

frontend/src/components/notifications/NotificationBell.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { useUnreadCount } from '@/hooks/useNotifications'
 import { useTranslation } from 'react-i18next'
 

frontend/src/hooks/useOpenIssue.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react'
-import { useSearchParams } from 'react-router-dom'
+import { useSearchParams } from 'react-router'
 
 /** Öffnet ein Issue als Modal, indem `?issue=KEY` gesetzt wird (übrige Query-Parameter bleiben erhalten). */
 export function useOpenIssue() {

frontend/src/layouts/AppLayout.tsx

@@ -1,4 +1,4 @@
-import { Outlet, Link, useNavigate, useMatch } from 'react-router-dom'
+import { Outlet, Link, useNavigate, useMatch } from 'react-router'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import {

frontend/src/layouts/AuthLayout.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router'
 import { VersionTag } from '@/components/VersionTag'
 
 export function AuthLayout() {

frontend/src/layouts/SettingsLayout.tsx

@@ -1,4 +1,4 @@
-import { Outlet, NavLink } from 'react-router-dom'
+import { Outlet, NavLink } from 'react-router'
 import { useTranslation } from 'react-i18next'
 import { User, Shield, Bell, KeyRound, UserX } from 'lucide-react'
 

frontend/src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { QueryClientProvider } from '@tanstack/react-query'
-import { RouterProvider } from 'react-router-dom'
+import { RouterProvider } from 'react-router/dom'
 import { queryClient } from './app/queryClient'
 import { router } from './app/router'
 import './index.css'

frontend/src/pages/admin/AdminAutomationPage.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { useSystemRules, useToggleSystemRule } from '../../hooks/useAutomation'
 import { useTranslation } from 'react-i18next'
 

frontend/src/pages/auth/LoginPage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useNavigate, Link } from 'react-router-dom'
+import { useNavigate, Link } from 'react-router'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { authApi } from '@/api/auth'

frontend/src/pages/auth/RegisterPage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useNavigate, Link } from 'react-router-dom'
+import { useNavigate, Link } from 'react-router'
 import { useTranslation } from 'react-i18next'
 import { authApi } from '@/api/auth'
 

frontend/src/pages/automation/AutomationPage.tsx

@@ -1,4 +1,4 @@
-import { useParams, useNavigate } from 'react-router-dom'
+import { useParams, useNavigate } from 'react-router'
 import { useAutomationRules, useToggleRule, useDeleteRule } from '../../hooks/useAutomation'
 import { useTranslation } from 'react-i18next'
 

frontend/src/pages/automation/AutomationRuleEditorPage.tsx

@@ -1,4 +1,4 @@
-import { useParams, useNavigate } from 'react-router-dom'
+import { useParams, useNavigate } from 'react-router'
 import { useCreateRule } from '../../hooks/useAutomation'
 import { RuleEditor } from '../../components/automation/RuleEditor'
 import type { TriggerType, RuleConditionGroup, RuleAction } from '../../types'

frontend/src/pages/backlog/BacklogPage.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { useBacklog } from '@/hooks/useBoard'
 import { useStartSprint, useAssignIssue, useUnassignIssue } from '@/hooks/useSprints'
 import { useProjectSocket } from '@/hooks/useProjectSocket'

frontend/src/pages/board/BoardPage.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useParams, Link } from 'react-router-dom'
+import { useParams, Link } from 'react-router'
 import { DndContext, DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
 import { useBoard, useMoveIssue } from '@/hooks/useBoard'
 import { useCompleteSprint } from '@/hooks/useSprints'

frontend/src/pages/dashboard/DashboardPage.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { useProjects } from '@/hooks/useProjects'
 import { useTranslation } from 'react-i18next'
 

frontend/src/pages/issues/IssueDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { IssueDetailContent } from '@/components/issue/IssueDetailContent'
 
 export function IssueDetailPage() {

frontend/src/pages/issues/IssueListPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { useParams, useSearchParams } from 'react-router-dom'
+import { useParams, useSearchParams } from 'react-router'
 import { useTranslation } from 'react-i18next'
 import { useIssues, useCreateIssue } from '@/hooks/useIssues'
 import { useLabels } from '@/hooks/useLabels'

frontend/src/pages/orgs/OrgSettingsPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { useQuery } from '@tanstack/react-query'
 import { organizationsApi } from '@/api/organizations'
 import { useOrgMembers, useAddOrgMember, useChangeOrgMemberRole, useRemoveOrgMember } from '@/hooks/useOrganizations'

frontend/src/pages/orgs/OrgsPage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { organizationsApi, CreateOrganizationRequest, Organization } from '@/api/organizations'
 import { useMe } from '@/hooks/useAuth'

frontend/src/pages/project-dashboard/ProjectDashboardPage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { useProjectDashboard, useSaveDashboardLayout, useAddWidget, useRemoveWidget } from '@/hooks/useProjectDashboard'
 import type { WidgetData } from '@/hooks/useProjectDashboard'
 import { DashboardCanvas } from '@/components/dashboard/DashboardCanvas'

frontend/src/pages/projects/ProjectCreatePage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { useCreateProject } from '@/hooks/useProjects'
 import { useTranslation } from 'react-i18next'
 

frontend/src/pages/projects/servicedesk/IncidentDashboardPage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { serviceDeskApi } from '@/api/servicedesk'
 import { useTranslation } from 'react-i18next'

frontend/src/pages/projects/servicedesk/ServiceDeskPage.tsx

@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { useQuery } from '@tanstack/react-query'
 import { serviceDeskApi } from '@/api/servicedesk'
 import { useTranslation } from 'react-i18next'

frontend/src/pages/projects/settings/CustomFieldsPage.tsx

@@ -1,6 +1,6 @@
 // frontend/src/pages/projects/settings/CustomFieldsPage.tsx
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { DndContext, closestCenter, DragEndEvent } from '@dnd-kit/core'
 import { SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'

frontend/src/pages/projects/settings/LabelsPage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { useLabels, useCreateLabel, useUpdateLabel, useDeleteLabel } from '@/hooks/useLabels'
 import { useProjectRole } from '@/hooks/useProjectRole'
 import { LabelChip } from '@/components/issue/LabelChip'

frontend/src/pages/projects/settings/MembersPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { useQuery } from '@tanstack/react-query'
 import { useProject } from '@/hooks/useProjects'
 import {

frontend/src/pages/projects/settings/OrganizationSettingsPage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { useProject } from '@/hooks/useProjects'
 import { organizationsApi } from '@/api/organizations'

frontend/src/pages/projects/settings/ProjectAuditPage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { auditApi, AuditEvent } from '../../../api/audit'

frontend/src/pages/projects/settings/VersionsPage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { useVersions, useCreateVersion, useUpdateVersion, useDeleteVersion } from '@/hooks/useVersions'
 import { useProjectRole } from '@/hooks/useProjectRole'
 import type { Version } from '@/types'

frontend/src/pages/reports/ReportsPage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { useSprints } from '@/hooks/useSprints'
 import { useBurndown, useVelocity } from '@/hooks/useReports'
 import {

frontend/src/pages/settings/AccountSettingsPage.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { useDeleteAccount } from '@/hooks/useAccount'
 
 export function AccountSettingsPage() {

frontend/src/pages/settings/ApiKeysPage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import { useApiKeys, useCreateApiKey, useRevokeApiKey } from '@/hooks/useApiKeys'
 import type { CreateApiKeyResponse } from '@/hooks/useApiKeys'
 import { DataTable, type Column } from '@/components/table/DataTable'

frontend/src/pages/settings/IntegrationsPage.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams } from 'react-router'
 import {
   useProjectIntegrations, useCreateIntegration, useDeleteIntegration
 } from '@/hooks/useProjectIntegrations'