Make react router routing possible outside components

src/App.tsx

@@ -8,7 +8,7 @@
 
 import CssBaseline from '@mui/material/CssBaseline';
 import React, { useEffect, useLayoutEffect } from 'react';
-import { Navigate, Outlet, Route, Routes, useLocation } from 'react-router-dom';
+import { Navigate, Outlet, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { loadErrorMessages, loadDevMessages } from '@apollo/client/dev';
 import { loadable } from 'react-lazily/loadable';
 import Box from '@mui/material/Box';
@@ -32,6 +32,7 @@ import { LoginPage } from '@/features/authentication/screens/LoginPage.tsx';
 import { AuthGuard } from '@/features/authentication/components/AuthGuard.tsx';
 import { SearchParam } from '@/base/Base.types.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { ReactRouter } from '@/lib/react-router/ReactRouter.ts';
 
 const { Browse } = loadable(() => import('@/features/browse/screens/Browse.tsx'), lazyLoadFallback);
 const { DownloadQueue } = loadable(() => import('@/features/downloads/screens/DownloadQueue.tsx'), lazyLoadFallback);
@@ -143,6 +144,16 @@ const BackgroundSubscriptions = () => {
     return null;
 };
 
+const ReactRouterSetter = () => {
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        ReactRouter.setNavigateFn(navigate);
+    }, []);
+
+    return null;
+};
+
 const PrivateRoutes = () => {
     const { isAuthRequired, accessToken, refreshToken } = useSessionContext();
 
@@ -291,6 +302,7 @@ export const App: React.FC = () => (
         <WebUIUpdateChecker />
         <InitialBackgroundRequests />
         <BackgroundSubscriptions />
+        <ReactRouterSetter />
         <CssBaseline enableColorScheme />
         <AuthGuard>
             <Box sx={{ display: 'flex' }}>

src/features/reader/services/ReaderControls.ts

@@ -166,8 +166,6 @@ export class ReaderControls {
     ) => void {
         const { t } = useTranslation();
 
-        const openChapter = ReaderService.useNavigateToChapter();
-
         return useCallback(
             (offset, doTransitionCheck = true, scrollIntoView = true) => {
                 const {
@@ -250,7 +248,7 @@ export class ReaderControls {
                             );
                         }
 
-                        openChapter(chapterToOpen, {
+                        ReaderService.navigateToChapter(chapterToOpen, {
                             resumeMode: getReaderOpenChapterResumeMode(
                                 isSpecificChapterMode || !keepRenderedChapters,
                                 isPreviousChapter,
@@ -264,7 +262,7 @@ export class ReaderControls {
 
                 doOpenChapter().catch(defaultPromiseErrorHandler('ReaderControls#useOpenChapter'));
             },
-            [t, openChapter],
+            [t],
         );
     }
 

src/features/reader/services/ReaderService.ts

@@ -47,6 +47,7 @@ import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
 import { getMetadataKey } from '@/features/metadata/Metadata.utils.ts';
 import { DirectionOffset } from '@/base/Base.types.ts';
 import { getReaderStore, useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
+import { ReactRouter } from '@/lib/react-router/ReactRouter.ts';
 
 const DIRECTION_TO_INVERTED: Record<Direction, Direction> = {
     ltr: 'rtl',
@@ -71,15 +72,11 @@ export class ReaderService {
         return ReaderService.chapterUpdateQueues.get(id)!;
     }
 
-    static useNavigateToChapter(): (chapter: TChapterReader, state?: ReaderOpenChapterLocationState) => void {
-        const navigate = useNavigate();
-
-        return useCallback((chapter, state) => {
-            navigate(Chapters.getReaderUrl(chapter), {
-                replace: true,
-                state,
-            });
-        }, []);
+    static navigateToChapter(chapter: TChapterReader, state?: ReaderOpenChapterLocationState): void {
+        ReactRouter.navigate(Chapters.getReaderUrl(chapter), {
+            replace: true,
+            state,
+        });
     }
 
     static downloadAhead(

src/lib/react-router/ReactRouter.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { NavigateFunction, NavigateOptions, To } from 'react-router-dom';
+import { noOp } from '@/lib/HelperFunctions.ts';
+
+export class ReactRouter {
+    private static navigateFn: NavigateFunction = noOp;
+
+    static setNavigateFn(navigate: NavigateFunction) {
+        this.navigateFn = navigate;
+    }
+
+    static navigate(delta: number): void;
+    static navigate(to: To, options?: NavigateOptions): void;
+    static navigate(toOrDelta: number | To, options?: NavigateOptions): void {
+        if (typeof toOrDelta === 'number') {
+            this.navigateFn(toOrDelta);
+            return;
+        }
+
+        this.navigateFn(toOrDelta, options);
+    }
+}