diff --git a/frontend/javascripts/admin/account/account_password_view.tsx b/frontend/javascripts/admin/account/account_password_view.tsx
index 9d74a6e6546..76692325199 100644
--- a/frontend/javascripts/admin/account/account_password_view.tsx
+++ b/frontend/javascripts/admin/account/account_password_view.tsx
@@ -4,7 +4,7 @@ import { Alert, Button, Col, Form, Input, Row, Space } from "antd";
 import Toast from "libs/toast";
 import messages from "messages";
 import { useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { logoutUserAction } from "viewer/model/actions/user_actions";
 import Store from "viewer/store";
 import { SettingsCard } from "./helpers/settings_card";
@@ -15,7 +15,7 @@ const { Password } = Input;
 const MIN_PASSWORD_LENGTH = 8;
 
 function AccountPasswordView() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const [form] = Form.useForm();
   const [isResetPasswordVisible, setResetPasswordVisible] = useState(false);
 
@@ -25,7 +25,7 @@ function AccountPasswordView() {
         Toast.success(messages["auth.reset_pw_confirmation"]);
         await logoutUser();
         Store.dispatch(logoutUserAction());
-        history.push("/auth/login");
+        navigate("/auth/login");
       })
       .catch((error) => {
         console.error("Password change failed:", error);
diff --git a/frontend/javascripts/admin/account/account_settings_view.tsx b/frontend/javascripts/admin/account/account_settings_view.tsx
index 75d0730b01e..bfb0dcdaa16 100644
--- a/frontend/javascripts/admin/account/account_settings_view.tsx
+++ b/frontend/javascripts/admin/account/account_settings_view.tsx
@@ -1,10 +1,7 @@
 import { SafetyOutlined, SettingOutlined, UserOutlined } from "@ant-design/icons";
 import { Breadcrumb, Layout, Menu } from "antd";
 import type { MenuItemGroupType } from "antd/es/menu/interface";
-import { Redirect, Route, Switch, useHistory, useLocation } from "react-router-dom";
-import AccountAuthTokenView from "./account_auth_token_view";
-import AccountPasswordView from "./account_password_view";
-import AccountProfileView from "./account_profile_view";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
 
 const { Sider, Content } = Layout;
 
@@ -46,7 +43,7 @@ const MENU_ITEMS: MenuItemGroupType[] = [
 
 function AccountSettingsView() {
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const selectedKey = location.pathname.split("/").filter(Boolean).pop() || "profile";
 
   const breadcrumbItems = [
@@ -68,17 +65,12 @@ function AccountSettingsView() {
           selectedKeys={[selectedKey]}
           style={{ height: "100%", padding: 24 }}
           items={MENU_ITEMS}
-          onClick={({ key }) => history.push(`/account/${key}`)}
+          onClick={({ key }) => navigate(`/account/${key}`)}
         />
       </Sider>
       <Content style={{ padding: "32px", minHeight: 280, maxWidth: 1000 }}>
         <Breadcrumb style={{ marginBottom: "16px" }} items={breadcrumbItems} />
-        <Switch>
-          <Route path="/account/profile" component={AccountProfileView} />
-          <Route path="/account/password" component={AccountPasswordView} />
-          <Route path="/account/token" component={AccountAuthTokenView} />
-          <Route path="/account" render={() => <Redirect to="/account/profile" />} />
-        </Switch>
+        <Outlet />
       </Content>
     </Layout>
   );
diff --git a/frontend/javascripts/admin/auth/accept_invite_view.tsx b/frontend/javascripts/admin/auth/accept_invite_view.tsx
index 958c34a16d7..366d92699c9 100644
--- a/frontend/javascripts/admin/auth/accept_invite_view.tsx
+++ b/frontend/javascripts/admin/auth/accept_invite_view.tsx
@@ -4,22 +4,19 @@ import { getOrganizationByInvite, joinOrganization, switchToOrganization } from
 import { Button, Layout, Result, Spin } from "antd";
 import { AsyncButton } from "components/async_clickables";
 import { useFetch } from "libs/react_helpers";
+import { useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import { location } from "libs/window";
 import { useState } from "react";
-import { useHistory } from "react-router-dom";
-import type { APIUser } from "types/api_types";
+import { useNavigate, useParams } from "react-router-dom";
 
 const { Content } = Layout;
 
-export default function AcceptInviteView({
-  token,
-  activeUser,
-}: {
-  token: string;
-  activeUser: APIUser | null | undefined;
-}) {
-  const history = useHistory();
+export default function AcceptInviteView() {
+  const activeUser = useWkSelector((state) => state.activeUser);
+  const { token = "" } = useParams();
+  const navigate = useNavigate();
+
   const [isAuthenticationModalOpen, setIsAuthenticationModalOpen] = useState(false);
   const [targetOrganization, exception] = useFetch(
     async () => {
@@ -46,7 +43,7 @@ export default function AcceptInviteView({
     targetOrganization != null ? targetOrganization.name || targetOrganization.id : "unknown";
 
   const onSuccessfulJoin = (userJustRegistered: boolean = false) => {
-    history.push("/dashboard");
+    navigate("/dashboard");
 
     if (userJustRegistered) {
       // Since the user just registered, the organization is already active.
diff --git a/frontend/javascripts/admin/auth/finish_reset_password_view.tsx b/frontend/javascripts/admin/auth/finish_reset_password_view.tsx
index f8c88ec8d2d..2e767c3710c 100644
--- a/frontend/javascripts/admin/auth/finish_reset_password_view.tsx
+++ b/frontend/javascripts/admin/auth/finish_reset_password_view.tsx
@@ -2,32 +2,34 @@ import { LockOutlined } from "@ant-design/icons";
 import { Button, Card, Col, Form, Input, Row } from "antd";
 import Request from "libs/request";
 import Toast from "libs/toast";
+import { getUrlParamsObjectFromString } from "libs/utils";
 import messages from "messages";
-import { useHistory } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
+
 const FormItem = Form.Item;
 const { Password } = Input;
-type Props = {
-  resetToken: string;
-};
 
-function FinishResetPasswordView(props: Props) {
+function FinishResetPasswordView() {
+  const location = useLocation();
+  const { token } = getUrlParamsObjectFromString(location.search);
+
   const [form] = Form.useForm();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   function onFinish(formValues: Record<string, any>) {
     const data = formValues;
 
-    if (props.resetToken === "") {
+    if (token == null) {
       Toast.error(messages["auth.reset_token_not_supplied"]);
       return;
     }
 
-    data.token = props.resetToken;
+    data.token = token;
     Request.sendJSONReceiveJSON("/api/auth/resetPassword", {
       data,
     }).then(() => {
       Toast.success(messages["auth.reset_pw_confirmation"]);
-      history.push("/auth/login");
+      navigate("/auth/login");
     });
   }
 
diff --git a/frontend/javascripts/admin/auth/login_view.tsx b/frontend/javascripts/admin/auth/login_view.tsx
index 6f50060d055..ca010b7ab7a 100644
--- a/frontend/javascripts/admin/auth/login_view.tsx
+++ b/frontend/javascripts/admin/auth/login_view.tsx
@@ -1,7 +1,7 @@
 import { Card, Col, Row } from "antd";
 import * as Utils from "libs/utils";
 import window from "libs/window";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import LoginForm from "./login_form";
 
 type Props = {
@@ -9,14 +9,14 @@ type Props = {
 };
 
 function LoginView({ redirect }: Props) {
-  const history = useHistory();
+  const navigate = useNavigate();
   const onLoggedIn = () => {
     if (!Utils.hasUrlParam("redirectPage")) {
       if (redirect) {
         // Use "redirect" prop for internal redirects, e.g. for SecuredRoutes
-        history.push(redirect);
+        navigate(redirect);
       } else {
-        history.push("/dashboard");
+        navigate("/dashboard");
       }
     } else {
       // Use "redirectPage" URL parameter to cause a full page reload and redirecting to external sites
diff --git a/frontend/javascripts/admin/auth/registration_view.tsx b/frontend/javascripts/admin/auth/registration_view.tsx
index 591e0ab619d..a48c461ccf9 100644
--- a/frontend/javascripts/admin/auth/registration_view.tsx
+++ b/frontend/javascripts/admin/auth/registration_view.tsx
@@ -6,11 +6,11 @@ import features from "features";
 import Toast from "libs/toast";
 import messages from "messages";
 import { useEffect, useState } from "react";
-import { Link, useHistory } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import type { APIOrganization } from "types/api_types";
 
 function RegistrationViewGeneric() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const [organization, setOrganization] = useState<APIOrganization | null>(null);
   const [isLoading, setIsLoading] = useState(true);
 
@@ -55,10 +55,10 @@ function RegistrationViewGeneric() {
           targetOrganization={organization}
           onRegistered={(isUserLoggedIn?: boolean) => {
             if (isUserLoggedIn) {
-              history.goBack();
+              navigate(-1);
             } else {
               Toast.success(messages["auth.account_created"]);
-              history.push("/auth/login");
+              navigate("/auth/login");
             }
           }}
         />
@@ -95,7 +95,7 @@ function RegistrationViewGeneric() {
 }
 
 function RegistrationViewWkOrg() {
-  const history = useHistory();
+  const navigate = useNavigate();
   return (
     <Row justify="center" align="middle" className="login-view">
       <Col>
@@ -103,7 +103,7 @@ function RegistrationViewWkOrg() {
           <h3>Sign Up</h3>
           <RegistrationFormWKOrg
             onRegistered={() => {
-              history.push("/dashboard");
+              navigate("/dashboard");
             }}
           />
           <p
diff --git a/frontend/javascripts/admin/auth/start_reset_password_view.tsx b/frontend/javascripts/admin/auth/start_reset_password_view.tsx
index ad72eecf2bf..b0f23246211 100644
--- a/frontend/javascripts/admin/auth/start_reset_password_view.tsx
+++ b/frontend/javascripts/admin/auth/start_reset_password_view.tsx
@@ -3,19 +3,19 @@ import { Button, Card, Col, Form, Input, Row } from "antd";
 import Request from "libs/request";
 import Toast from "libs/toast";
 import messages from "messages";
-import { Link, useHistory } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 const FormItem = Form.Item;
 
 function StartResetPasswordView() {
   const [form] = Form.useForm();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const onFinish = (formValues: Record<string, any>) => {
     Request.sendJSONReceiveJSON("/api/auth/startResetPassword", {
       data: formValues,
     }).then(() => {
       Toast.success(messages["auth.reset_email_notification"]);
-      history.push("/");
+      navigate("/");
     });
   };
 
diff --git a/frontend/javascripts/admin/auth/verify_email_view.tsx b/frontend/javascripts/admin/auth/verify_email_view.tsx
index 0979872f791..d95e5e3dc0a 100644
--- a/frontend/javascripts/admin/auth/verify_email_view.tsx
+++ b/frontend/javascripts/admin/auth/verify_email_view.tsx
@@ -4,7 +4,7 @@ import { useFetch } from "libs/react_helpers";
 import type { ServerErrorMessage } from "libs/request";
 import Toast from "libs/toast";
 import { useEffect } from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { Store } from "viewer/singletons";
 
 export const VERIFICATION_ERROR_TOAST_KEY = "verificationError";
@@ -44,8 +44,9 @@ export function showVerificationReminderToast() {
   );
 }
 
-export default function VerifyEmailView({ token }: { token: string }) {
-  const history = useHistory();
+export default function VerifyEmailView() {
+  const { token = "" } = useParams();
+  const navigate = useNavigate();
   const [result, exception] = useFetch(
     async () => {
       try {
@@ -62,7 +63,7 @@ export default function VerifyEmailView({ token }: { token: string }) {
     Toast.close(VERIFICATION_ERROR_TOAST_KEY);
   }, []);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: history.push is not needed as a dependency.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: navigate is not needed as a dependency.
   useEffect(() => {
     if (result) {
       Toast.success("Successfully verified your email.");
@@ -80,7 +81,7 @@ export default function VerifyEmailView({ token }: { token: string }) {
     }
 
     if (result || exception) {
-      history.push("/");
+      navigate("/");
     }
   }, [result, exception]);
   return (
diff --git a/frontend/javascripts/admin/dataset/dataset_add_remote_view.tsx b/frontend/javascripts/admin/dataset/dataset_add_remote_view.tsx
index 6a53102aaae..44ef85777ad 100644
--- a/frontend/javascripts/admin/dataset/dataset_add_remote_view.tsx
+++ b/frontend/javascripts/admin/dataset/dataset_add_remote_view.tsx
@@ -25,6 +25,7 @@ import DatasetSettingsDataTab, {
 import { FormItemWithInfo, Hideable } from "dashboard/dataset/helper_components";
 import FolderSelection from "dashboard/folders/folder_selection";
 import { formatScale } from "libs/format_utils";
+import { useWkSelector } from "libs/react_hooks";
 import { readFileAsText } from "libs/read_file";
 import Toast from "libs/toast";
 import { jsonStringify } from "libs/utils";
@@ -32,13 +33,11 @@ import * as Utils from "libs/utils";
 import _ from "lodash";
 import messages from "messages";
 import React, { useEffect, useState } from "react";
-import { connect } from "react-redux";
-import { useHistory } from "react-router-dom";
-import type { APIDataStore, APIUser } from "types/api_types";
+import { useNavigate } from "react-router-dom";
+import type { APIDataStore } from "types/api_types";
 import type { ArbitraryObject } from "types/globals";
 import type { DataLayer, DatasourceConfiguration } from "types/schemas/datasource.types";
 import { Unicode } from "viewer/constants";
-import type { WebknossosState } from "viewer/store";
 import { Hint } from "viewer/view/action-bar/download_modal_view";
 import { dataPrivacyInfo } from "./dataset_upload_view";
 
@@ -48,7 +47,7 @@ const { Password } = Input;
 
 type FileList = UploadFile<any>[];
 
-type OwnProps = {
+type Props = {
   onAdded: (
     uploadedDatasetId: string,
     updatedDatasetName: string,
@@ -61,11 +60,6 @@ type OwnProps = {
   // the exploration and import.
   defaultDatasetUrl?: string | null | undefined;
 };
-type StateProps = {
-  activeUser: APIUser | null | undefined;
-};
-type Props = OwnProps & StateProps;
-
 function ensureLargestSegmentIdsInPlace(datasource: DatasourceConfiguration) {
   for (const layer of datasource.dataLayers) {
     if (layer.category === "color" || layer.largestSegmentId != null) {
@@ -180,7 +174,10 @@ export function GoogleAuthFormItem({
 }
 
 function DatasetAddRemoteView(props: Props) {
-  const { activeUser, onAdded, datastores, defaultDatasetUrl } = props;
+  const { activeUser } = useWkSelector((state) => ({
+    activeUser: state.activeUser,
+  }));
+  const { onAdded, datastores, defaultDatasetUrl } = props;
 
   const uploadableDatastores = datastores.filter((datastore) => datastore.allowsUpload);
   const hasOnlyOneDatastoreOrNone = uploadableDatastores.length <= 1;
@@ -192,7 +189,7 @@ function DatasetAddRemoteView(props: Props) {
   const [targetFolderId, setTargetFolderId] = useState<string | null>(null);
   const isDatasourceConfigStrFalsy = Form.useWatch("dataSourceJson", form) == null;
   const maybeDataLayers = Form.useWatch(["dataSource", "dataLayers"], form);
-  const history = useHistory();
+  const navigate = useNavigate();
 
   useEffect(() => {
     const params = new URLSearchParams(location.search);
@@ -213,7 +210,7 @@ function DatasetAddRemoteView(props: Props) {
       .getFieldError("datasetName")
       .filter((error) => error === messages["dataset.name.already_taken"]);
     if (maybeDSNameError == null) return;
-    history.push(
+    navigate(
       `/datasets/${activeUser?.organization}/${form.getFieldValue(["dataSource", "id", "name"])}`,
     );
   };
@@ -729,9 +726,4 @@ function AddRemoteLayer({
   );
 }
 
-const mapStateToProps = (state: WebknossosState): StateProps => ({
-  activeUser: state.activeUser,
-});
-
-const connector = connect(mapStateToProps);
-export default connector(DatasetAddRemoteView);
+export default DatasetAddRemoteView;
diff --git a/frontend/javascripts/admin/dataset/dataset_add_view.tsx b/frontend/javascripts/admin/dataset/dataset_add_view.tsx
index 6e7c13d2f70..573927d22ba 100644
--- a/frontend/javascripts/admin/dataset/dataset_add_view.tsx
+++ b/frontend/javascripts/admin/dataset/dataset_add_view.tsx
@@ -7,12 +7,9 @@ import features from "features";
 import { useFetch } from "libs/react_helpers";
 import { useWkSelector } from "libs/react_hooks";
 import React, { useState } from "react";
-import { connect } from "react-redux";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import type { APIDataStore } from "types/api_types";
 import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
-import { enforceActiveUser } from "viewer/model/accessors/user_accessor";
-import type { WebknossosState } from "viewer/store";
 import DatasetAddComposeView from "./dataset_add_compose_view";
 
 const { Content, Sider } = Layout;
@@ -32,7 +29,7 @@ const addTypeToVerb: Record<DatasetAddType, string> = {
 };
 
 function DatasetAddView() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const datastores = useFetch<APIDataStore[]>(getDatastores, [], []);
   const [datasetId, setDatasetId] = useState("");
   const [uploadedDatasetName, setUploadedDatasetName] = useState("");
@@ -64,7 +61,7 @@ function DatasetAddView() {
       datasetId,
       uploadedDatasetName,
       setDatasetId,
-      history,
+      navigate,
     );
   };
 
@@ -261,12 +258,7 @@ function VoxelyticsBanner() {
   );
 }
 
-const mapStateToProps = (state: WebknossosState) => ({
-  activeUser: enforceActiveUser(state.activeUser),
-});
-
-const connector = connect(mapStateToProps);
-export default connector(DatasetAddView);
+export default DatasetAddView;
 
 const getPostUploadModal = (
   datasetNeedsConversion: boolean,
@@ -274,7 +266,7 @@ const getPostUploadModal = (
   datasetId: string,
   uploadedDatasetName: string,
   setDatasetId: (arg0: string) => void,
-  history: ReturnType<typeof useHistory>,
+  navigate: ReturnType<typeof useNavigate>,
 ) => {
   return (
     <Modal
@@ -314,17 +306,17 @@ const getPostUploadModal = (
         >
           {datasetNeedsConversion ? (
             <React.Fragment>
-              <Button type="primary" onClick={() => history.push("/jobs")}>
+              <Button type="primary" onClick={() => navigate("/jobs")}>
                 View the Jobs Queue
               </Button>
-              <Button onClick={() => history.push("/dashboard/datasets")}>Go to Dashboard</Button>
+              <Button onClick={() => navigate("/dashboard/datasets")}>Go to Dashboard</Button>
             </React.Fragment>
           ) : (
             <React.Fragment>
               <Button
                 type="primary"
                 onClick={() =>
-                  history.push(
+                  navigate(
                     `/datasets/${getReadableURLPart({ name: uploadedDatasetName, id: datasetId })}/view`,
                   )
                 }
@@ -333,14 +325,14 @@ const getPostUploadModal = (
               </Button>
               <Button
                 onClick={() =>
-                  history.push(
+                  navigate(
                     `/datasets/${getReadableURLPart({ name: uploadedDatasetName, id: datasetId })}/edit`,
                   )
                 }
               >
                 Go to Dataset Settings
               </Button>
-              <Button onClick={() => history.push("/dashboard/datasets")}>Go to Dashboard</Button>
+              <Button onClick={() => navigate("/dashboard/datasets")}>Go to Dashboard</Button>
             </React.Fragment>
           )}
         </div>
diff --git a/frontend/javascripts/admin/dataset/dataset_upload_view.tsx b/frontend/javascripts/admin/dataset/dataset_upload_view.tsx
index f8db7a30d70..d2658817e25 100644
--- a/frontend/javascripts/admin/dataset/dataset_upload_view.tsx
+++ b/frontend/javascripts/admin/dataset/dataset_upload_view.tsx
@@ -23,7 +23,6 @@ import {
   Tooltip,
 } from "antd";
 import dayjs from "dayjs";
-import type { Action as HistoryAction, Location as HistoryLocation } from "history";
 import React from "react";
 import { connect } from "react-redux";
 
@@ -56,12 +55,13 @@ import ErrorHandling from "libs/error_handling";
 import Toast from "libs/toast";
 import * as Utils from "libs/utils";
 import { Vector3Input } from "libs/vector_input";
+import { type WithBlockerProps, withBlocker } from "libs/with_blocker_hoc";
+import { type RouteComponentProps, withRouter } from "libs/with_router_hoc";
 import Zip from "libs/zipjs_wrapper";
 import _ from "lodash";
 import messages from "messages";
 import { type FileWithPath, useDropzone } from "react-dropzone";
-import { Link, type RouteComponentProps } from "react-router-dom";
-import { withRouter } from "react-router-dom";
+import { type BlockerFunction, Link } from "react-router-dom";
 import {
   type APIDataStore,
   APIJobType,
@@ -95,10 +95,7 @@ type StateProps = {
   activeUser: APIUser | null | undefined;
   organization: APIOrganization;
 };
-type Props = OwnProps & StateProps;
-type PropsWithFormAndRouter = Props & {
-  history: RouteComponentProps["history"];
-};
+type PropsWithFormAndRouter = OwnProps & StateProps & RouteComponentProps & WithBlockerProps;
 type State = {
   isUploading: boolean;
   isFinishing: boolean;
@@ -218,7 +215,6 @@ class DatasetUploadView extends React.Component<PropsWithFormAndRouter, State> {
     unfinishedUploadToContinue: null,
   };
 
-  unblock: ((...args: Array<any>) => any) | null | undefined;
   blockTimeoutId: number | null = null;
   formRef: React.RefObject<FormInstance<UploadFormFieldTypes>> = React.createRef<FormInstance>();
 
@@ -268,15 +264,12 @@ class DatasetUploadView extends React.Component<PropsWithFormAndRouter, State> {
 
   unblockHistory() {
     window.onbeforeunload = null;
+    this.props.blocker.reset ? this.props.blocker.reset() : void 0;
 
     if (this.blockTimeoutId != null) {
       clearTimeout(this.blockTimeoutId);
       this.blockTimeoutId = null;
     }
-
-    if (this.unblock != null) {
-      this.unblock();
-    }
   }
 
   getDatastoreForUrl(url: string): APIDataStore | null | undefined {
@@ -298,35 +291,33 @@ class DatasetUploadView extends React.Component<PropsWithFormAndRouter, State> {
       uploadProgress: 0,
     });
 
-    const beforeUnload = (
-      newLocation: HistoryLocation<unknown>,
-      action: HistoryAction,
-    ): string | false | void => {
-      // Only show the prompt if this is a proper beforeUnload event from the browser
-      // or the pathname changed
-      // This check has to be done because history.block triggers this function even if only the url hash changed
-      if (action === undefined || newLocation.pathname !== window.location.pathname) {
-        const { isUploading } = this.state;
-
-        if (isUploading) {
-          window.onbeforeunload = null; // clear the event handler otherwise it would be called twice. Once from history.block once from the beforeunload event
-
-          this.blockTimeoutId = window.setTimeout(() => {
-            // restore the event handler in case a user chose to stay on the page
-            // @ts-ignore
-            window.onbeforeunload = beforeUnload;
-          }, 500);
-          return messages["dataset.leave_during_upload"];
-        }
+    const beforeUnload = (args: BeforeUnloadEvent | BlockerFunction): boolean => {
+      // Navigation blocking can be triggered by two sources:
+      // 1. The browser's native beforeunload event
+      // 2. The React-Router block function (useBlocker or withBlocker HOC)
+
+      if (this.state.isUploading) {
+        window.onbeforeunload = null; // clear the event handler otherwise it would be called twice. Once from history.block once from the beforeunload event
+
+        this.blockTimeoutId = window.setTimeout(() => {
+          // restore the event handler in case a user chose to stay on the page
+          window.onbeforeunload = beforeUnload;
+        }, 500);
+        // The native event requires a truthy return value to show a generic message
+        // The React Router blocker accepts a boolean
+        return "preventDefault" in args ? true : !confirm(messages["save.leave_page_unfinished"]);
       }
 
-      return;
+      return false;
     };
+
     const { unfinishedUploadToContinue } = this.state;
 
-    this.unblock = this.props.history.block(beforeUnload);
-    // @ts-ignore
     window.onbeforeunload = beforeUnload;
+    this.props.setBlocking({
+      // @ts-ignore beforeUnload signature is overloaded
+      shouldBlock: beforeUnload,
+    });
 
     const getRandomString = () => {
       const randomBytes = window.crypto.getRandomValues(new Uint8Array(6));
@@ -1376,4 +1367,4 @@ const mapStateToProps = (state: WebknossosState): StateProps => ({
 });
 
 const connector = connect(mapStateToProps);
-export default connector(withRouter<RouteComponentProps & OwnProps, any>(DatasetUploadView));
+export default connector(withBlocker(withRouter<PropsWithFormAndRouter>(DatasetUploadView)));
diff --git a/frontend/javascripts/admin/dataset/dataset_url_import.tsx b/frontend/javascripts/admin/dataset/dataset_url_import.tsx
index 49f318f605a..244d01cd63c 100644
--- a/frontend/javascripts/admin/dataset/dataset_url_import.tsx
+++ b/frontend/javascripts/admin/dataset/dataset_url_import.tsx
@@ -3,15 +3,15 @@ import { getDatastores } from "admin/rest_api";
 import { useFetch } from "libs/react_helpers";
 import * as Utils from "libs/utils";
 import _ from "lodash";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 export function DatasetURLImport() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const datastores = useFetch(async () => await getDatastores(), null, []);
   const params = Utils.getUrlParamsObject();
   const datasetUri = _.has(params, "url") ? params.url : null;
   const handleDatasetAdded = async (addedDatasetId: string): Promise<void> => {
-    history.push(`/datasets/${addedDatasetId}/view`);
+    navigate(`/datasets/${addedDatasetId}/view`);
   };
 
   return datastores != null ? (
diff --git a/frontend/javascripts/admin/onboarding.tsx b/frontend/javascripts/admin/onboarding.tsx
index 91786313fa4..86779c93a47 100644
--- a/frontend/javascripts/admin/onboarding.tsx
+++ b/frontend/javascripts/admin/onboarding.tsx
@@ -22,9 +22,10 @@ import LinkButton from "components/link_button";
 import DatasetSettingsView from "dashboard/dataset/dataset_settings_view";
 import features from "features";
 import Toast from "libs/toast";
+import { type RouteComponentProps, withRouter } from "libs/with_router_hoc";
 import React, { useState } from "react";
 import { connect } from "react-redux";
-import { Link, type RouteComponentProps, withRouter } from "react-router-dom";
+import { Link } from "react-router-dom";
 import type { APIDataStore, APIUser } from "types/api_types";
 import type { WebknossosState } from "viewer/store";
 import Store from "viewer/store";
@@ -408,7 +409,7 @@ class OnboardingView extends React.PureComponent<Props, State> {
 
   componentDidMount() {
     if (this.props.activeUser != null) {
-      this.props.history.push("/dashboard");
+      this.props.navigate("/dashboard");
     }
   }
 
@@ -733,4 +734,4 @@ const mapStateToProps = (state: WebknossosState): StateProps => ({
 });
 
 const connector = connect(mapStateToProps);
-export default connector(withRouter<RouteComponentProps & Props, any>(OnboardingView));
+export default connector(withRouter<Props>(OnboardingView));
diff --git a/frontend/javascripts/admin/organization/organization_danger_zone_view.tsx b/frontend/javascripts/admin/organization/organization_danger_zone_view.tsx
index 3f3646e3f2f..530dba36466 100644
--- a/frontend/javascripts/admin/organization/organization_danger_zone_view.tsx
+++ b/frontend/javascripts/admin/organization/organization_danger_zone_view.tsx
@@ -3,10 +3,14 @@ import { SettingsTitle } from "admin/account/helpers/settings_title";
 import { deleteOrganization } from "admin/rest_api";
 import { Button, Typography } from "antd";
 import { confirmAsync } from "dashboard/dataset/helper_components";
+import { useWkSelector } from "libs/react_hooks";
 import { useState } from "react";
-import type { APIOrganization } from "types/api_types";
+import { enforceActiveOrganization } from "viewer/model/accessors/organization_accessors";
 
-export function OrganizationDangerZoneView({ organization }: { organization: APIOrganization }) {
+export function OrganizationDangerZoneView() {
+  const organization = useWkSelector((state) =>
+    enforceActiveOrganization(state.activeOrganization),
+  );
   const [isDeleting, setIsDeleting] = useState(false);
 
   async function handleDeleteButtonClicked(): Promise<void> {
diff --git a/frontend/javascripts/admin/organization/organization_notifications_view.tsx b/frontend/javascripts/admin/organization/organization_notifications_view.tsx
index f903c7e29f2..50ef078a47f 100644
--- a/frontend/javascripts/admin/organization/organization_notifications_view.tsx
+++ b/frontend/javascripts/admin/organization/organization_notifications_view.tsx
@@ -4,9 +4,10 @@ import { SettingsTitle } from "admin/account/helpers/settings_title";
 import { updateOrganization } from "admin/rest_api";
 import { getUsers } from "admin/rest_api";
 import { Button, Col, Form, Input, Row } from "antd";
+import { useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import { useEffect, useState } from "react";
-import type { APIOrganization } from "types/api_types";
+import { enforceActiveOrganization } from "viewer/model/accessors/organization_accessors";
 import { setActiveOrganizationAction } from "viewer/model/actions/organization_actions";
 import { Store } from "viewer/singletons";
 
@@ -17,7 +18,10 @@ type FormValues = {
   newUserMailingList: string;
 };
 
-export function OrganizationNotificationsView({ organization }: { organization: APIOrganization }) {
+export function OrganizationNotificationsView() {
+  const organization = useWkSelector((state) =>
+    enforceActiveOrganization(state.activeOrganization),
+  );
   const [form] = Form.useForm<FormValues>();
   const [ownerEmail, setOwnerEmail] = useState<string>("");
 
diff --git a/frontend/javascripts/admin/organization/organization_overview_view.tsx b/frontend/javascripts/admin/organization/organization_overview_view.tsx
index 8f3013555c4..94b9d92bee5 100644
--- a/frontend/javascripts/admin/organization/organization_overview_view.tsx
+++ b/frontend/javascripts/admin/organization/organization_overview_view.tsx
@@ -3,9 +3,11 @@ import { SettingsTitle } from "admin/account/helpers/settings_title";
 import { getPricingPlanStatus, getUsers, updateOrganization } from "admin/rest_api";
 import { Button, Col, Row, Spin, Tooltip, Typography } from "antd";
 import { formatCountToDataAmountUnit } from "libs/format_utils";
+import { useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import { useEffect, useState } from "react";
-import type { APIOrganization, APIPricingPlanStatus } from "types/api_types";
+import type { APIPricingPlanStatus } from "types/api_types";
+import { enforceActiveOrganization } from "viewer/model/accessors/organization_accessors";
 import { setActiveOrganizationAction } from "viewer/model/actions/organization_actions";
 import { Store } from "viewer/singletons";
 import { SettingsCard } from "../account/helpers/settings_card";
@@ -20,7 +22,10 @@ import UpgradePricingPlanModal from "./upgrade_plan_modal";
 
 const ORGA_NAME_REGEX_PATTERN = /^[A-Za-z0-9\-_. ß]+$/;
 
-export function OrganizationOverviewView({ organization }: { organization: APIOrganization }) {
+export function OrganizationOverviewView() {
+  const organization = useWkSelector((state) =>
+    enforceActiveOrganization(state.activeOrganization),
+  );
   const [isFetchingData, setIsFetchingData] = useState(true);
   const [activeUsersCount, setActiveUsersCount] = useState(1);
   const [pricingPlanStatus, setPricingPlanStatus] = useState<APIPricingPlanStatus | null>(null);
diff --git a/frontend/javascripts/admin/organization/organization_view.tsx b/frontend/javascripts/admin/organization/organization_view.tsx
index 31c53572f0e..8ceb02deb47 100644
--- a/frontend/javascripts/admin/organization/organization_view.tsx
+++ b/frontend/javascripts/admin/organization/organization_view.tsx
@@ -1,14 +1,8 @@
 import { DeleteOutlined, MailOutlined, UserOutlined } from "@ant-design/icons";
 import { Breadcrumb, Layout, Menu } from "antd";
 import type { MenuItemGroupType } from "antd/es/menu/interface";
-import { useWkSelector } from "libs/react_hooks";
-import { Route, Switch, useHistory, useLocation } from "react-router-dom";
-import { Redirect } from "react-router-dom";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import constants from "viewer/constants";
-import { enforceActiveOrganization } from "viewer/model/accessors/organization_accessors";
-import { OrganizationDangerZoneView } from "./organization_danger_zone_view";
-import { OrganizationNotificationsView } from "./organization_notifications_view";
-import { OrganizationOverviewView } from "./organization_overview_view";
 
 const { Sider, Content } = Layout;
 
@@ -43,11 +37,8 @@ const MENU_ITEMS: MenuItemGroupType[] = [
 ];
 
 const OrganizationView = () => {
-  const organization = useWkSelector((state) =>
-    enforceActiveOrganization(state.activeOrganization),
-  );
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const selectedKey = location.pathname.split("/").filter(Boolean).pop() || "overview";
 
   const breadcrumbItems = [
@@ -72,26 +63,12 @@ const OrganizationView = () => {
           selectedKeys={[selectedKey]}
           style={{ height: "100%", padding: 24 }}
           items={MENU_ITEMS}
-          onClick={({ key }) => history.push(`/organization/${key}`)}
+          onClick={({ key }) => navigate(`/organization/${key}`)}
         />
       </Sider>
       <Content style={{ padding: "32px", minHeight: 280, maxWidth: 1000 }}>
         <Breadcrumb style={{ marginBottom: "16px" }} items={breadcrumbItems} />
-        <Switch>
-          <Route
-            path="/organization/overview"
-            render={() => <OrganizationOverviewView organization={organization} />}
-          />
-          <Route
-            path="/organization/notifications"
-            render={() => <OrganizationNotificationsView organization={organization} />}
-          />
-          <Route
-            path="/organization/delete"
-            render={() => <OrganizationDangerZoneView organization={organization} />}
-          />
-          <Route path="/organization" render={() => <Redirect to="/organization/overview" />} />
-        </Switch>
+        <Outlet />
       </Content>
     </Layout>
   );
diff --git a/frontend/javascripts/admin/project/project_create_view.tsx b/frontend/javascripts/admin/project/project_create_view.tsx
index 8fdbb69f40b..42be517587d 100644
--- a/frontend/javascripts/admin/project/project_create_view.tsx
+++ b/frontend/javascripts/admin/project/project_create_view.tsx
@@ -8,22 +8,21 @@ import {
 import { Button, Card, Checkbox, Form, Input, InputNumber, Select } from "antd";
 import { useWkSelector } from "libs/react_hooks";
 import { useEffect, useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import type { APITeam, APIUser } from "types/api_types";
 import { enforceActiveUser } from "viewer/model/accessors/user_accessor";
 import { FormItemWithInfo } from "../../dashboard/dataset/helper_components";
 
 const FormItem = Form.Item;
-type Props = {
-  projectId?: string | null | undefined;
-};
 
-function ProjectCreateView({ projectId }: Props) {
+function ProjectCreateView() {
+  const { projectId } = useParams();
+
   const [teams, setTeams] = useState<APITeam[]>([]);
   const [users, setUsers] = useState<APIUser[]>([]);
   const [isFetchingData, setIsFetchingData] = useState<boolean>(false);
   const [form] = Form.useForm();
-  const history = useHistory();
+  const navigate = useNavigate();
   const activeUser = useWkSelector((state) => enforceActiveUser(state.activeUser));
   useEffect(() => {
     fetchData();
@@ -59,7 +58,7 @@ function ProjectCreateView({ projectId }: Props) {
       await createProject(formValues);
     }
 
-    history.push("/projects");
+    navigate("/projects");
   };
 
   const isEditMode = projectId != null;
diff --git a/frontend/javascripts/admin/project/project_list_view.tsx b/frontend/javascripts/admin/project/project_list_view.tsx
index be6467dcb8d..a12b51f0f4e 100644
--- a/frontend/javascripts/admin/project/project_list_view.tsx
+++ b/frontend/javascripts/admin/project/project_list_view.tsx
@@ -28,36 +28,24 @@ import { AsyncLink } from "components/async_clickables";
 import FormattedDate from "components/formatted_date";
 import { handleGenericError } from "libs/error_handling";
 import Persistence from "libs/persistence";
-import { useEffectOnlyOnce } from "libs/react_hooks";
+import { useEffectOnlyOnce, useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import * as Utils from "libs/utils";
 import _ from "lodash";
 import messages from "messages";
 import React, { useEffect, useState } from "react";
-import { connect } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link, useLocation, useParams } from "react-router-dom";
 import {
   type APIProject,
   type APIProjectWithStatus,
-  type APIUser,
   type APIUserBase,
   TracingTypeEnum,
 } from "types/api_types";
 import { enforceActiveUser } from "viewer/model/accessors/user_accessor";
-import type { WebknossosState } from "viewer/store";
 
 const { Column } = Table;
 const { Search } = Input;
 
-type OwnProps = {
-  initialSearchValue?: string;
-  taskTypeId?: string;
-};
-type StateProps = {
-  activeUser: APIUser;
-};
-type Props = OwnProps & StateProps;
-
 const persistence = new Persistence<{ searchQuery: string }>(
   {
     searchQuery: PropTypes.string,
@@ -65,8 +53,13 @@ const persistence = new Persistence<{ searchQuery: string }>(
   "projectList",
 );
 
-function ProjectListView({ initialSearchValue, taskTypeId, activeUser }: Props) {
+function ProjectListView() {
+  const { taskTypeId } = useParams();
+
   const { modal } = App.useApp();
+  const location = useLocation();
+  const initialSearchValue = location.hash.slice(1);
+  const activeUser = useWkSelector((state) => enforceActiveUser(state.activeUser));
 
   const [isLoading, setIsLoading] = useState(true);
   const [projects, setProjects] = useState<APIProjectWithStatus[]>([]);
@@ -95,10 +88,6 @@ function ProjectListView({ initialSearchValue, taskTypeId, activeUser }: Props)
     persistence.persist({ searchQuery });
   }, [searchQuery]);
 
-  useEffect(() => {
-    fetchData(taskTypeId);
-  }, [taskTypeId]);
-
   async function fetchData(taskTypeId?: string): Promise<void> {
     let projects;
     let taskTypeName;
@@ -475,9 +464,4 @@ function ProjectListView({ initialSearchValue, taskTypeId, activeUser }: Props)
   );
 }
 
-const mapStateToProps = (state: WebknossosState): StateProps => ({
-  activeUser: enforceActiveUser(state.activeUser),
-});
-
-const connector = connect(mapStateToProps);
-export default connector(ProjectListView);
+export default ProjectListView;
diff --git a/frontend/javascripts/admin/scripts/script_create_view.tsx b/frontend/javascripts/admin/scripts/script_create_view.tsx
index 24ddbe8ac56..5b86d5afc27 100644
--- a/frontend/javascripts/admin/scripts/script_create_view.tsx
+++ b/frontend/javascripts/admin/scripts/script_create_view.tsx
@@ -1,23 +1,18 @@
 import { createScript, getScript, getTeamManagerOrAdminUsers, updateScript } from "admin/rest_api";
 import { Button, Card, Form, Input, Select } from "antd";
+import { useWkSelector } from "libs/react_hooks";
 import { useEffect, useState } from "react";
-import { connect } from "react-redux";
-import { useHistory } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import type { APIUser } from "types/api_types";
 import { enforceActiveUser } from "viewer/model/accessors/user_accessor";
-import type { WebknossosState } from "viewer/store";
 
 const FormItem = Form.Item;
-type OwnProps = {
-  scriptId?: string | null | undefined;
-};
-type StateProps = {
-  activeUser: APIUser;
-};
-type Props = OwnProps & StateProps;
 
-function ScriptCreateView({ scriptId, activeUser }: Props) {
-  const history = useHistory();
+function ScriptCreateView() {
+  const { scriptId } = useParams();
+
+  const navigate = useNavigate();
+  const activeUser = useWkSelector((state) => enforceActiveUser(state.activeUser));
   const [users, setUsers] = useState<APIUser[]>([]);
   const [isFetchingData, setIsFetchingData] = useState<boolean>(false);
   const [form] = Form.useForm();
@@ -51,7 +46,7 @@ function ScriptCreateView({ scriptId, activeUser }: Props) {
       await createScript(formValues);
     }
 
-    history.push("/scripts");
+    navigate("/scripts");
   };
 
   const titlePrefix = scriptId ? "Update" : "Create";
@@ -127,9 +122,4 @@ function ScriptCreateView({ scriptId, activeUser }: Props) {
   );
 }
 
-const mapStateToProps = (state: WebknossosState): StateProps => ({
-  activeUser: enforceActiveUser(state.activeUser),
-});
-
-const connector = connect(mapStateToProps);
-export default connector(ScriptCreateView);
+export default ScriptCreateView;
diff --git a/frontend/javascripts/admin/task/task_create_form_view.tsx b/frontend/javascripts/admin/task/task_create_form_view.tsx
index 2c7dacc0cd2..d5ce5133826 100644
--- a/frontend/javascripts/admin/task/task_create_form_view.tsx
+++ b/frontend/javascripts/admin/task/task_create_form_view.tsx
@@ -42,7 +42,7 @@ import { Vector3Input, Vector6Input } from "libs/vector_input";
 import _ from "lodash";
 import messages from "messages";
 import React, { useEffect, useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import type { APIDataset, APIProject, APIScript, APITask, APITaskType } from "types/api_types";
 import type { Vector3, Vector6 } from "viewer/constants";
 import type { BoundingBoxObject } from "viewer/store";
@@ -288,10 +288,6 @@ export function ReloadResourceButton({
   );
 }
 
-type Props = {
-  taskId: string | null | undefined;
-};
-
 type FormValues = {
   baseAnnotation: NewTask["baseAnnotation"];
   boundingBox: Vector6 | null;
@@ -307,8 +303,9 @@ type FormValues = {
   neededExperience: NewTask["neededExperience"];
 };
 
-function TaskCreateFormView({ taskId }: Props) {
-  const history = useHistory();
+function TaskCreateFormView() {
+  const { taskId } = useParams();
+  const navigate = useNavigate();
   const { modal } = App.useApp();
   const [form] = Form.useForm<FormValues>();
 
@@ -381,7 +378,7 @@ function TaskCreateFormView({ taskId }: Props) {
         boundingBox,
       };
       const confirmedTask = await updateTask(taskId, newTask);
-      history.push(`/tasks/${confirmedTask.id}`);
+      navigate(`/tasks/${confirmedTask.id}`);
     } else {
       setIsUploading(true);
       // or create a new one either from the form values or with an NML file
diff --git a/frontend/javascripts/admin/task/task_create_view.tsx b/frontend/javascripts/admin/task/task_create_view.tsx
index eb489cb2372..3be53a227c3 100644
--- a/frontend/javascripts/admin/task/task_create_view.tsx
+++ b/frontend/javascripts/admin/task/task_create_view.tsx
@@ -9,7 +9,7 @@ const TaskCreateView = () => {
       icon: <ScheduleOutlined />,
       label: "Create Task",
       key: "1",
-      children: <TaskCreateFormView taskId={null} />,
+      children: <TaskCreateFormView />,
     },
     {
       icon: <BarsOutlined />,
diff --git a/frontend/javascripts/admin/task/task_list_view.tsx b/frontend/javascripts/admin/task/task_list_view.tsx
index 0919c06386a..bfbbcda32ea 100644
--- a/frontend/javascripts/admin/task/task_list_view.tsx
+++ b/frontend/javascripts/admin/task/task_list_view.tsx
@@ -38,7 +38,7 @@ import _ from "lodash";
 import messages from "messages";
 import type React from "react";
 import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import type { APITask, APITaskType, TaskStatus } from "types/api_types";
 
 const { Search, TextArea } = Input;
@@ -56,6 +56,14 @@ const persistence = new Persistence<{ searchQuery: string }>(
 
 function TaskListView({ initialFieldValues }: Props) {
   const { modal } = App.useApp();
+  const { taskId, projectId, taskTypeId } = useParams();
+
+  initialFieldValues = {
+    ...initialFieldValues,
+    taskId,
+    projectId,
+    taskTypeId,
+  };
 
   const [isLoading, setIsLoading] = useState(false);
   const [tasks, setTasks] = useState<APITask[]>([]);
diff --git a/frontend/javascripts/admin/tasktype/task_type_create_view.tsx b/frontend/javascripts/admin/tasktype/task_type_create_view.tsx
index 2abd94f7dc9..8f171bc54a3 100644
--- a/frontend/javascripts/admin/tasktype/task_type_create_view.tsx
+++ b/frontend/javascripts/admin/tasktype/task_type_create_view.tsx
@@ -9,7 +9,7 @@ import { useFetch } from "libs/react_helpers";
 import { jsonStringify } from "libs/utils";
 import _ from "lodash";
 import { useEffect, useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import {
   type APIAllowedMode,
   type APIMagRestrictions,
@@ -24,10 +24,6 @@ const RadioGroup = Radio.Group;
 const FormItem = Form.Item;
 const { TextArea } = Input;
 
-type Props = {
-  taskTypeId?: string | null | undefined;
-};
-
 type FormValues = {
   isMagRestricted: boolean;
   summary: string;
@@ -73,8 +69,10 @@ function isMaximumMagnificationSmallerThenMinRule(value: number | undefined, min
   );
 }
 
-function TaskTypeCreateView({ taskTypeId }: Props) {
-  const history = useHistory();
+function TaskTypeCreateView() {
+  const { taskTypeId } = useParams();
+
+  const navigate = useNavigate();
   const [useRecommendedConfiguration, setUseRecommendedConfiguration] = useState(false);
   const [isFetchingData, setIsFetchingData] = useState(true);
   const [form] = Form.useForm<FormValues>();
@@ -165,7 +163,7 @@ function TaskTypeCreateView({ taskTypeId }: Props) {
       await createTaskType(newTaskType);
     }
 
-    history.push("/taskTypes");
+    navigate("/taskTypes");
   }
 
   function onChangeUseRecommendedConfiguration(useRecommendedConfiguration: boolean) {
diff --git a/frontend/javascripts/admin/tasktype/task_type_list_view.tsx b/frontend/javascripts/admin/tasktype/task_type_list_view.tsx
index a9791d65bce..73a63157914 100644
--- a/frontend/javascripts/admin/tasktype/task_type_list_view.tsx
+++ b/frontend/javascripts/admin/tasktype/task_type_list_view.tsx
@@ -23,16 +23,12 @@ import _ from "lodash";
 import messages from "messages";
 import * as React from "react";
 import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import type { APITaskType } from "types/api_types";
 
 const { Column } = Table;
 const { Search } = Input;
 
-type Props = {
-  initialSearchValue?: string;
-};
-
 const persistence = new Persistence<{ searchQuery: string }>(
   {
     searchQuery: PropTypes.string,
@@ -40,7 +36,10 @@ const persistence = new Persistence<{ searchQuery: string }>(
   "taskTypeList",
 );
 
-function TaskTypeListView({ initialSearchValue }: Props) {
+function TaskTypeListView() {
+  const location = useLocation();
+  const initialSearchValue = location.hash.slice(1);
+
   const [isLoading, setIsLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState("");
   const [taskTypes, setTaskTypes] = useState<APITaskType[]>([]);
diff --git a/frontend/javascripts/admin/user/user_list_view.tsx b/frontend/javascripts/admin/user/user_list_view.tsx
index e617fab0d7f..41c7a3af69d 100644
--- a/frontend/javascripts/admin/user/user_list_view.tsx
+++ b/frontend/javascripts/admin/user/user_list_view.tsx
@@ -24,11 +24,11 @@ import Persistence from "libs/persistence";
 import Toast from "libs/toast";
 import * as Utils from "libs/utils";
 import { location } from "libs/window";
+import { type RouteComponentProps, withRouter } from "libs/with_router_hoc";
 import _ from "lodash";
 import messages from "messages";
 import React, { type Key, useEffect, useState } from "react";
 import { connect } from "react-redux";
-import type { RouteComponentProps } from "react-router-dom";
 import { Link } from "react-router-dom";
 import type { APIOrganization, APITeamMembership, APIUser, ExperienceMap } from "types/api_types";
 import { enforceActiveOrganization } from "viewer/model/accessors/organization_accessors";
@@ -656,4 +656,4 @@ const mapStateToProps = (state: WebknossosState): StateProps => ({
 });
 
 const connector = connect(mapStateToProps);
-export default connector(UserListView);
+export default connector(withRouter(UserListView));
diff --git a/frontend/javascripts/admin/voxelytics/task_list_view.tsx b/frontend/javascripts/admin/voxelytics/task_list_view.tsx
index 075ae0f3796..348c677b116 100644
--- a/frontend/javascripts/admin/voxelytics/task_list_view.tsx
+++ b/frontend/javascripts/admin/voxelytics/task_list_view.tsx
@@ -38,7 +38,7 @@ import {
 } from "libs/format_utils";
 import { useSearchParams, useUpdateEvery, useWkSelector } from "libs/react_hooks";
 import { notEmpty } from "libs/utils";
-import { Link, useHistory, useLocation, useParams } from "react-router-dom";
+import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import {
   VoxelyticsRunState,
   type VoxelyticsTaskConfig,
@@ -264,7 +264,7 @@ export default function TaskListView({
   const { modal } = App.useApp();
   const [searchQuery, setSearchQuery] = useState("");
   const { runId } = useSearchParams();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   // expandedTask = state of the collapsible list
   const [expandedTasks, setExpandedTasks] = useState<Array<string>>([]);
@@ -433,7 +433,7 @@ export default function TaskListView({
       onOk: async () => {
         try {
           await deleteWorkflow(report.workflow.hash);
-          history.push("/workflows");
+          navigate("/workflows");
           message.success("Workflow report deleted.");
         } catch (error) {
           console.error(error);
@@ -678,10 +678,10 @@ export default function TaskListView({
           <Select
             value={runId ?? ""}
             onChange={(value) =>
-              history.replace(
+              navigate(
                 value === ""
-                  ? removeUrlParam(history.location, "runId")
-                  : addUrlParam(history.location, "runId", value),
+                  ? removeUrlParam(location, "runId")
+                  : addUrlParam(location, "runId", value),
               )
             }
             style={{ maxWidth: "70%" }}
diff --git a/frontend/javascripts/admin/voxelytics/workflow_view.tsx b/frontend/javascripts/admin/voxelytics/workflow_view.tsx
index 9d855375906..b4500c581c2 100644
--- a/frontend/javascripts/admin/voxelytics/workflow_view.tsx
+++ b/frontend/javascripts/admin/voxelytics/workflow_view.tsx
@@ -318,7 +318,7 @@ function shouldCollapseId(id: string, expandedKeys: Record<string, boolean>): [s
 }
 
 export default function WorkflowView() {
-  const { workflowName } = useParams<{ workflowName: string }>();
+  const { workflowName = "" } = useParams();
   const { metatask } = useSearchParams();
   const user = useWkSelector((state) => state.activeUser);
 
diff --git a/frontend/javascripts/components/redirect.tsx b/frontend/javascripts/components/redirect.tsx
index 144068a228e..143ef68b08f 100644
--- a/frontend/javascripts/components/redirect.tsx
+++ b/frontend/javascripts/components/redirect.tsx
@@ -1,6 +1,6 @@
 import { useEffectOnlyOnce } from "libs/react_hooks";
 import type React from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 type Props = {
   redirectTo: () => Promise<string>;
@@ -8,7 +8,7 @@ type Props = {
 };
 
 const AsyncRedirect: React.FC<Props> = ({ redirectTo, pushToHistory = true }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   useEffectOnlyOnce(() => {
     const redirect = async () => {
       const newPath = await redirectTo();
@@ -25,9 +25,9 @@ const AsyncRedirect: React.FC<Props> = ({ redirectTo, pushToHistory = true }) =>
       }
 
       if (pushToHistory) {
-        history.push(newPath);
+        navigate(newPath);
       } else {
-        history.replace(newPath);
+        navigate(newPath, { replace: true });
       }
     };
 
diff --git a/frontend/javascripts/components/secured_route.tsx b/frontend/javascripts/components/secured_route.tsx
index cf25b04f59f..09d7a7cdb13 100644
--- a/frontend/javascripts/components/secured_route.tsx
+++ b/frontend/javascripts/components/secured_route.tsx
@@ -3,115 +3,79 @@ import {
   type PricingPlanEnum,
   isFeatureAllowedByPricingPlan,
 } from "admin/organization/pricing_plan_utils";
+import { getUnversionedAnnotationInformation } from "admin/rest_api";
 import { PageUnavailableForYourPlanView } from "components/pricing_enforcers";
+import { useWkSelector } from "libs/react_hooks";
 import { isUserAdminOrManager } from "libs/utils";
-import React from "react";
-import type { ComponentType } from "react";
-import { connect } from "react-redux";
-import { Route, withRouter } from "react-router-dom";
-import type { RouteComponentProps } from "react-router-dom";
-import type { APIOrganization, APIUser } from "types/api_types";
-import type { WebknossosState } from "viewer/store";
+import type React from "react";
+import { memo, useCallback, useEffect, useState } from "react";
+import { useLocation, useParams } from "react-router-dom";
 import { PageNotAvailableToNormalUser } from "./permission_enforcer";
 
-type StateProps = {
-  activeOrganization: APIOrganization | null;
-  activeUser: APIUser | null | undefined;
-};
-export type SecuredRouteProps = RouteComponentProps &
-  StateProps & {
-    component?: ComponentType<any>;
-    path: string;
-    render?: (arg0: RouteComponentProps) => React.ReactNode;
-    isAuthenticated: boolean;
-    requiredPricingPlan?: PricingPlanEnum;
-    requiresAdminOrManagerRole?: boolean;
-    serverAuthenticationCallback?: (...args: Array<any>) => any;
-    exact?: boolean;
-  };
-type State = {
-  isAdditionallyAuthenticated: boolean;
+export type SecuredRouteProps = {
+  children: React.ReactNode;
+  requiredPricingPlan?: PricingPlanEnum;
+  requiresAdminOrManagerRole?: boolean;
+  checkIfResourceIsPublic?: boolean;
 };
 
-class SecuredRoute extends React.PureComponent<SecuredRouteProps, State> {
-  state: State = {
-    isAdditionallyAuthenticated: false,
-  };
+function SecuredRoute({
+  children,
+  requiredPricingPlan,
+  requiresAdminOrManagerRole,
+  checkIfResourceIsPublic = false,
+}: SecuredRouteProps) {
+  const location = useLocation();
+  const { id } = useParams();
+  const activeOrganization = useWkSelector((state) => state.activeOrganization);
+  const activeUser = useWkSelector((state) => state.activeUser);
+  const isAuthenticated = activeUser !== null;
+  const [isSecuredResourcePubliclyAvailable, setIsSecuredResourcePubliclyAvailable] =
+    useState(false);
 
-  componentDidMount() {
-    this.fetchData();
-  }
+  const getIsResourcePublic = useCallback(async () => {
+    if (id) {
+      try {
+        const annotationInformation = await getUnversionedAnnotationInformation(id || "");
+        return annotationInformation.visibility === "Public";
+      } catch (_ex) {
+        // Annotation could not be found
+      }
+    }
+
+    return false;
+  }, [id]);
 
-  async fetchData() {
-    if (!this.props.isAuthenticated && this.props.serverAuthenticationCallback != null) {
-      const isAdditionallyAuthenticated = await this.props.serverAuthenticationCallback({
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'computedMatch' does not exist on type 'R... Remove this comment to see the full error message
-        match: this.props.computedMatch,
-        location: this.props.location,
-      });
-      this.setState({
-        isAdditionallyAuthenticated,
-      });
+  useEffect(() => {
+    async function fetchData() {
+      if (!isAuthenticated && checkIfResourceIsPublic) {
+        const isAdditionallyAuthenticated = await getIsResourcePublic();
+        setIsSecuredResourcePubliclyAvailable(isAdditionallyAuthenticated);
+      }
     }
-  }
+    fetchData();
+  }, [isAuthenticated, getIsResourcePublic, checkIfResourceIsPublic]);
 
-  render() {
-    const {
-      component: Component,
-      render,
-      isAuthenticated,
-      serverAuthenticationCallback,
-      ...rest
-    } = this.props;
-    const isCompletelyAuthenticated = serverAuthenticationCallback
-      ? isAuthenticated || this.state.isAdditionallyAuthenticated
-      : isAuthenticated;
-    const isAdminOrManager = this.props.activeUser && isUserAdminOrManager(this.props.activeUser);
-    return (
-      <Route
-        {...rest}
-        render={(props) => {
-          if (!isCompletelyAuthenticated) {
-            return (
-              <LoginView
-                redirect={this.props.location.pathname.concat(this.props.location.search)}
-              />
-            );
-          }
+  const isCompletelyAuthenticated = checkIfResourceIsPublic
+    ? isAuthenticated || isSecuredResourcePubliclyAvailable
+    : isAuthenticated;
+  const isAdminOrManager = activeUser && isUserAdminOrManager(activeUser);
 
-          if (
-            this.props.requiredPricingPlan &&
-            !isFeatureAllowedByPricingPlan(
-              this.props.activeOrganization,
-              this.props.requiredPricingPlan,
-            )
-          ) {
-            return (
-              <PageUnavailableForYourPlanView
-                requiredPricingPlan={this.props.requiredPricingPlan}
-              />
-            );
-          }
-          if (this.props.requiresAdminOrManagerRole && !isAdminOrManager) {
-            return <PageNotAvailableToNormalUser />;
-          }
+  if (!isCompletelyAuthenticated) {
+    return <LoginView redirect={`${location.pathname}${location.search}`} />;
+  }
 
-          if (Component != null) {
-            return <Component />;
-          } else if (render != null) {
-            return render(props);
-          } else {
-            throw Error("Specified neither component nor render function.");
-          }
-        }}
-      />
-    );
+  if (
+    requiredPricingPlan &&
+    !isFeatureAllowedByPricingPlan(activeOrganization, requiredPricingPlan)
+  ) {
+    return <PageUnavailableForYourPlanView requiredPricingPlan={requiredPricingPlan} />;
   }
+  if (requiresAdminOrManagerRole && !isAdminOrManager) {
+    return <PageNotAvailableToNormalUser />;
+  }
+
+  return children;
 }
-const mapStateToProps = (state: WebknossosState): StateProps => ({
-  activeOrganization: state.activeOrganization,
-  activeUser: state.activeUser,
-});
 
-const connector = connect(mapStateToProps);
-export default connector(withRouter<SecuredRouteProps, any>(SecuredRoute));
+export default memo(SecuredRoute);
diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.tsx b/frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.tsx
index dcbc5e69c80..bb42fa4e915 100644
--- a/frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.tsx
+++ b/frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.tsx
@@ -18,7 +18,7 @@ import window from "libs/window";
 import messages from "messages";
 import type * as React from "react";
 import { useState } from "react";
-import { Link, type LinkProps } from "react-router-dom";
+import { Link } from "react-router-dom";
 import type { APIDataset, APIDatasetCompact } from "types/api_types";
 import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
 import { getNoActionsAvailableMenu } from "viewer/view/context_menu";
@@ -100,7 +100,8 @@ function LinkWithDisabled({
   style?: React.CSSProperties;
   to: string;
   children: React.ReactNode;
-} & LinkProps) {
+  title?: string;
+}) {
   const maybeDisabledStyle = disabled ? disabledStyle : null;
   const adaptedStyle =
     rest.style != null ? { ...rest.style, ...maybeDisabledStyle } : maybeDisabledStyle;
@@ -113,7 +114,7 @@ function LinkWithDisabled({
     <Link
       {...rest}
       style={adaptedStyle || undefined}
-      onClick={(e) => (disabled ? e.preventDefault() : onClick)}
+      onClick={(e) => (disabled ? e.preventDefault() : onClick?.())}
     />
   );
 }
diff --git a/frontend/javascripts/dashboard/dashboard_view.tsx b/frontend/javascripts/dashboard/dashboard_view.tsx
index 0c2f5579a6e..cc60906c85b 100644
--- a/frontend/javascripts/dashboard/dashboard_view.tsx
+++ b/frontend/javascripts/dashboard/dashboard_view.tsx
@@ -12,12 +12,11 @@ import { PublicationViewWithHeader } from "dashboard/publication_view";
 import features from "features";
 import Request from "libs/request";
 import UserLocalStorage from "libs/user_local_storage";
+import { type RouteComponentProps, withRouter } from "libs/with_router_hoc";
 import _ from "lodash";
 import type React from "react";
 import { PureComponent } from "react";
 import { connect } from "react-redux";
-import type { RouteComponentProps } from "react-router-dom";
-import { withRouter } from "react-router-dom";
 import type { Dispatch } from "redux";
 import type { APIOrganization, APIPricingPlanStatus, APIUser } from "types/api_types";
 import { enforceActiveOrganization } from "viewer/model/accessors/organization_accessors";
@@ -42,9 +41,7 @@ type DispatchProps = {
   updateActiveUser: (arg0: APIUser) => void;
 };
 type Props = OwnProps & StateProps & DispatchProps;
-type PropsWithRouter = Props & {
-  history: RouteComponentProps["history"];
-};
+type PropsWithRouter = Props & RouteComponentProps;
 type State = {
   activeTabKey: string;
   user: APIUser | null | undefined;
@@ -138,7 +135,7 @@ class DashboardView extends PureComponent<PropsWithRouter, State> {
         createGroupForEachFile,
       },
     });
-    this.props.history.push(`/annotations/${response.annotation.id}`);
+    this.props.navigate(`/annotations/${response.annotation.id}`);
   };
 
   getValidTabKeys() {
@@ -244,7 +241,7 @@ class DashboardView extends PureComponent<PropsWithRouter, State> {
         UserLocalStorage.setItem("lastUsedDashboardTab", activeTabKey);
 
         if (!this.props.isAdminView) {
-          this.props.history.push(`/dashboard/${url}`);
+          this.props.navigate(`/dashboard/${url}`);
         }
       }
 
@@ -311,4 +308,4 @@ const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
 });
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
-export default connector(withRouter<RouteComponentProps & Props, any>(DashboardView));
+export default connector(withRouter(DashboardView));
diff --git a/frontend/javascripts/dashboard/dataset/dataset_collection_context.tsx b/frontend/javascripts/dashboard/dataset/dataset_collection_context.tsx
index 86652accef2..f06ae7af506 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_collection_context.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_collection_context.tsx
@@ -336,7 +336,7 @@ function useManagedUrlParams(
 
       // Use folderName-folderId in path or only folderId if name is empty (e.g., because
       // not loaded yet).
-      // Don't use useHistory because this would lose the input search
+      // Don't use useNavigate because this would lose the input search
       // focus.
       window.history.replaceState(
         {},
@@ -364,7 +364,7 @@ function useManagedUrlParams(
       }
       const paramStr = params.toString();
 
-      // Don't use useHistory because this would lose the input search
+      // Don't use useNavigate because this would lose the input search
       // focus.
       window.history.replaceState(
         {},
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx
index c7b45ba87db..1feebf653b7 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_delete_tab.tsx
@@ -2,19 +2,17 @@ import { useQueryClient } from "@tanstack/react-query";
 import { deleteDatasetOnDisk, getDataset } from "admin/rest_api";
 import { Button } from "antd";
 import Toast from "libs/toast";
+import { type RouteComponentProps, withRouter } from "libs/with_router_hoc";
 import messages from "messages";
 import { useEffect, useState } from "react";
-import type { RouteComponentProps } from "react-router-dom";
-import { withRouter } from "react-router-dom";
 import type { APIDataset } from "types/api_types";
 import { confirmAsync } from "./helper_components";
 
 type Props = {
   datasetId: string;
-  history: RouteComponentProps["history"];
-};
+} & RouteComponentProps;
 
-const DatasetSettingsDeleteTab = ({ datasetId, history }: Props) => {
+const DatasetSettingsDeleteTab = ({ datasetId, navigate }: Props) => {
   const [isDeleting, setIsDeleting] = useState(false);
   const [dataset, setDataset] = useState<APIDataset | null | undefined>(null);
   const queryClient = useQueryClient();
@@ -61,7 +59,7 @@ const DatasetSettingsDeleteTab = ({ datasetId, history }: Props) => {
     });
     queryClient.invalidateQueries({ queryKey: ["dataset", "search"] });
 
-    history.push("/dashboard");
+    navigate("/dashboard");
   }
 
   return (
@@ -76,4 +74,4 @@ const DatasetSettingsDeleteTab = ({ datasetId, history }: Props) => {
   );
 };
 
-export default withRouter<RouteComponentProps & Props, any>(DatasetSettingsDeleteTab);
+export default withRouter(DatasetSettingsDeleteTab);
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
index 871e99ac7f3..549901ecb36 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_sharing_tab.tsx
@@ -9,10 +9,10 @@ import TeamSelectionComponent from "dashboard/dataset/team_selection_component";
 import Toast from "libs/toast";
 import { isUserAdminOrDatasetManager, isUserAdminOrTeamManager } from "libs/utils";
 import window from "libs/window";
+import { type RouteComponentProps, withRouter } from "libs/with_router_hoc";
 import type React from "react";
 import { useEffect, useState } from "react";
 import { connect } from "react-redux";
-import { type RouteComponentProps, withRouter } from "react-router-dom";
 import type { APIDataset, APIUser } from "types/api_types";
 import { getReadableURLPart } from "viewer/model/accessors/dataset_accessor";
 import type { WebknossosState } from "viewer/store";
@@ -167,4 +167,4 @@ const mapStateToProps = (state: WebknossosState) => ({
 });
 
 const connector = connect(mapStateToProps);
-export default connector(withRouter<RouteComponentProps & Props, any>(DatasetSettingsSharingTab));
+export default connector(withRouter<RouteComponentProps & Props>(DatasetSettingsSharingTab));
diff --git a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
index 9099c1ae5f9..a69f9283680 100644
--- a/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
+++ b/frontend/javascripts/dashboard/dataset/dataset_settings_view.tsx
@@ -13,20 +13,15 @@ import {
 import { Alert, Button, Card, Form, type FormInstance, Spin, Tabs, Tooltip } from "antd";
 import dayjs from "dayjs";
 import features from "features";
-import type {
-  Action as HistoryAction,
-  Location as HistoryLocation,
-  UnregisterCallback,
-} from "history";
 import { handleGenericError } from "libs/error_handling";
 import Toast from "libs/toast";
 import { jsonStringify } from "libs/utils";
+import { type RouteComponentProps, withRouter } from "libs/with_router_hoc";
 import _ from "lodash";
 import messages from "messages";
 import * as React from "react";
 import { connect } from "react-redux";
-import type { RouteComponentProps } from "react-router-dom";
-import { Link, withRouter } from "react-router-dom";
+import { Link } from "react-router-dom";
 import type { APIDataSource, APIDataset, APIMessage, MutableAPIDataset } from "types/api_types";
 import { enforceValidatedDatasetViewConfiguration } from "types/schemas/dataset_view_configuration_defaults";
 import { Unicode } from "viewer/constants";
@@ -57,9 +52,7 @@ type StateProps = {
   isUserAdmin: boolean;
 };
 type Props = OwnProps & StateProps;
-type PropsWithFormAndRouter = Props & {
-  history: RouteComponentProps["history"];
-};
+type PropsWithFormAndRouter = Props & RouteComponentProps;
 type TabKey = "data" | "general" | "defaultConfig" | "sharing" | "deleteDataset";
 type State = {
   hasUnsavedChanges: boolean;
@@ -82,7 +75,6 @@ export type FormData = {
 
 class DatasetSettingsView extends React.PureComponent<PropsWithFormAndRouter, State> {
   formRef = React.createRef<FormInstance>();
-  unblock: UnregisterCallback | null | undefined;
   blockTimeoutId: number | null | undefined;
   static contextType = defaultContext;
   declare context: React.ContextType<typeof defaultContext>;
@@ -103,51 +95,6 @@ class DatasetSettingsView extends React.PureComponent<PropsWithFormAndRouter, St
     sendAnalyticsEvent("open_dataset_settings", {
       datasetName: this.state.dataset ? this.state.dataset.name : "Not found dataset",
     });
-
-    const beforeUnload = (
-      newLocation: HistoryLocation<unknown>,
-      action: HistoryAction,
-    ): string | false | void => {
-      // Only show the prompt if this is a proper beforeUnload event from the browser
-      // or the pathname changed
-      // This check has to be done because history.block triggers this function even if only the url hash changed
-      if (action === undefined || newLocation.pathname !== window.location.pathname) {
-        const { hasUnsavedChanges } = this.state;
-
-        if (hasUnsavedChanges) {
-          window.onbeforeunload = null; // clear the event handler otherwise it would be called twice. Once from history.block once from the beforeunload event
-
-          this.blockTimeoutId = window.setTimeout(() => {
-            // restore the event handler in case a user chose to stay on the page
-            // @ts-ignore
-            window.onbeforeunload = beforeUnload;
-          }, 500);
-          return messages["dataset.leave_with_unsaved_changes"];
-        }
-      }
-      return;
-    };
-
-    this.unblock = this.props.history.block(beforeUnload);
-    // @ts-ignore
-    window.onbeforeunload = beforeUnload;
-  }
-
-  componentWillUnmount() {
-    this.unblockHistory();
-  }
-
-  unblockHistory() {
-    window.onbeforeunload = null;
-
-    if (this.blockTimeoutId != null) {
-      clearTimeout(this.blockTimeoutId);
-      this.blockTimeoutId = null;
-    }
-
-    if (this.unblock != null) {
-      this.unblock();
-    }
   }
 
   async fetchData(): Promise<void> {
@@ -522,7 +469,6 @@ class DatasetSettingsView extends React.PureComponent<PropsWithFormAndRouter, St
   };
 
   onCancel = () => {
-    this.unblockHistory();
     this.props.onCancel();
   };
 
@@ -714,4 +660,4 @@ const mapStateToProps = (state: WebknossosState): StateProps => ({
 });
 
 const connector = connect(mapStateToProps);
-export default connector(withRouter<RouteComponentProps & OwnProps, any>(DatasetSettingsView));
+export default connector(withRouter<PropsWithFormAndRouter>(DatasetSettingsView));
diff --git a/frontend/javascripts/dashboard/dataset_view.tsx b/frontend/javascripts/dashboard/dataset_view.tsx
index 5f2d5383476..e423be35755 100644
--- a/frontend/javascripts/dashboard/dataset_view.tsx
+++ b/frontend/javascripts/dashboard/dataset_view.tsx
@@ -35,12 +35,14 @@ import features from "features";
 import Persistence from "libs/persistence";
 import * as Utils from "libs/utils";
 import type { MenuProps } from "rc-menu";
-import React, { useState, useEffect } from "react";
+import type React from "react";
+import { Fragment, useContext, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import type { APIDatasetCompact, APIJob, APIUser, FolderItem } from "types/api_types";
 import { Unicode } from "viewer/constants";
 import { CategorizationSearch } from "viewer/view/components/categorization_label";
 import { RenderToPortal } from "viewer/view/layouting/portal_utils";
+import { ActiveTabContext, RenderingTabContext } from "./dashboard_contexts";
 import type { DatasetCollectionContextValue } from "./dataset/dataset_collection_context";
 import {
   MINIMUM_SEARCH_QUERY_LENGTH,
@@ -90,9 +92,14 @@ const refreshMenuItems: ItemType[] = [
   },
 ];
 
-function DatasetView(props: Props) {
-  const { user } = props;
-  const context = props.context;
+function DatasetView({
+  user,
+  context,
+  onSelectDataset,
+  selectedDatasets,
+  onSelectFolder,
+  setFolderIdForEditModal,
+}: Props) {
   const searchQuery = context.globalSearchQuery;
   const setSearchQuery = context.setGlobalSearchQuery;
   const [searchTags, setSearchTags] = useState<string[]>([]);
@@ -101,6 +108,9 @@ function DatasetView(props: Props) {
   const [jobs, setJobs] = useState<APIJob[]>([]);
   const { data: folder } = useFolderQuery(context.activeFolderId);
 
+  const activeTab = useContext(ActiveTabContext);
+  const renderingTab = useContext(RenderingTabContext);
+
   useEffect(() => {
     const state = persistence.load() as PersistenceState;
 
@@ -151,21 +161,21 @@ function DatasetView(props: Props) {
   function renderTable(filteredDatasets: APIDatasetCompact[], subfolders: FolderItem[]) {
     return (
       <DatasetTable
-        context={props.context}
+        context={context}
         datasets={filteredDatasets}
         subfolders={subfolders}
-        onSelectDataset={props.onSelectDataset}
-        selectedDatasets={props.selectedDatasets}
+        onSelectDataset={onSelectDataset}
+        selectedDatasets={selectedDatasets}
         searchQuery={searchQuery || ""}
         searchTags={searchTags}
-        onSelectFolder={props.onSelectFolder}
+        onSelectFolder={onSelectFolder}
         isUserAdmin={Utils.isUserAdmin(user)}
         isUserDatasetManager={Utils.isUserDatasetManager(user)}
         datasetFilteringMode={datasetFilteringMode}
         updateDataset={context.updateCachedDataset}
         reloadDataset={context.reloadDataset}
         addTagToSearch={addTagToSearch}
-        setFolderIdForEditModal={props.setFolderIdForEditModal}
+        setFolderIdForEditModal={setFolderIdForEditModal}
       />
     );
   }
@@ -234,7 +244,7 @@ function DatasetView(props: Props) {
       }}
     >
       {isUserAdminOrDatasetManagerOrTeamManager ? (
-        <React.Fragment>
+        <Fragment>
           <DatasetRefreshButton context={context} />
           <DatasetAddButton context={context} />
           {context.activeFolderId != null && (
@@ -252,7 +262,7 @@ function DatasetView(props: Props) {
             </PricingEnforcedButton>
           )}
           {search}
-        </React.Fragment>
+        </Fragment>
       ) : (
         search
       )}
@@ -274,8 +284,9 @@ function DatasetView(props: Props) {
 
   return (
     <div>
-      <RenderToPortal portalId="dashboard-TabBarExtraContent">{adminHeader}</RenderToPortal>
-
+      <RenderToPortal portalId="dashboard-TabBarExtraContent">
+        {activeTab === renderingTab ? adminHeader : null}
+      </RenderToPortal>
       {searchQuery && (
         <GlobalSearchHeader
           searchQuery={searchQuery}
@@ -428,7 +439,7 @@ function NewJobsAlert({ jobs }: { jobs: APIJob[] }) {
   }
 
   const newJobsHeader = (
-    <React.Fragment>
+    <Fragment>
       Recent Dataset Conversions{" "}
       <Tooltip
         title="The conversion of the displayed datasets were started in the last 3 days."
@@ -436,7 +447,7 @@ function NewJobsAlert({ jobs }: { jobs: APIJob[] }) {
       >
         <InfoCircleOutlined />
       </Tooltip>
-    </React.Fragment>
+    </Fragment>
   );
   const newJobsList = (
     <div
diff --git a/frontend/javascripts/dashboard/publication_details_view.tsx b/frontend/javascripts/dashboard/publication_details_view.tsx
index de466aaeef8..bf577393199 100644
--- a/frontend/javascripts/dashboard/publication_details_view.tsx
+++ b/frontend/javascripts/dashboard/publication_details_view.tsx
@@ -4,11 +4,13 @@ import { Layout, Spin, Tooltip } from "antd";
 import PublicationCard from "dashboard/publication_card";
 import { handleGenericError } from "libs/error_handling";
 import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import type { APIPublication } from "types/api_types";
 const { Content } = Layout;
 
-function PublicationDetailView({ publicationId }: { publicationId: string }) {
+function PublicationDetailView() {
+  const { id: publicationId = "" } = useParams();
+
   const [publication, setPublication] = useState<APIPublication | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
diff --git a/frontend/javascripts/libs/persistence.ts b/frontend/javascripts/libs/persistence.ts
index c7f02a5274f..f14bf25d8c9 100644
--- a/frontend/javascripts/libs/persistence.ts
+++ b/frontend/javascripts/libs/persistence.ts
@@ -63,8 +63,8 @@ class Persistence<T extends Record<string, any>> {
       locationState[this.name] == null ||
       !_.isEqual(stateToBePersisted, locationState[this.name])
     ) {
-      // Don't use the history object of react-router here, because
-      // calling history.replace() leads to focus-loss-bugs for input fields
+      // Don't use the navigate object of react-router here, because
+      // calling navigate(..., replace=True) leads to focus-loss-bugs for input fields
       // which are rendered into portals (this is the case for the search box
       // in the dashboard).
 
diff --git a/frontend/javascripts/libs/with_blocker_hoc.tsx b/frontend/javascripts/libs/with_blocker_hoc.tsx
new file mode 100644
index 00000000000..769cc991200
--- /dev/null
+++ b/frontend/javascripts/libs/with_blocker_hoc.tsx
@@ -0,0 +1,45 @@
+import type React from "react";
+import { forwardRef, useState } from "react";
+import { type Blocker, type BlockerFunction, useBlocker } from "react-router-dom";
+
+export type WithBlockerProps = {
+  setBlocking: ({ shouldBlock }: { shouldBlock: boolean | BlockerFunction }) => void;
+  blocker: Blocker;
+};
+
+/**
+ * Higher-Order Component that provides useBlocker functionality to class components
+ *
+ * @param WrappedComponent - The class component to enhance
+ * @returns Enhanced component with blocker functionality
+ */
+export function withBlocker<TProps extends WithBlockerProps>(
+  WrappedComponent: React.ComponentType<TProps>,
+): React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<Omit<TProps, keyof WithBlockerProps>> & React.RefAttributes<any>
+> {
+  const WithBlockerComponent = forwardRef<any, Omit<TProps, keyof WithBlockerProps>>(
+    (props, ref) => {
+      // State to control blocking behavior
+      const [shouldBlockState, setShouldBlockState] = useState<{
+        shouldBlock: boolean | BlockerFunction;
+      }>({
+        shouldBlock: false,
+      });
+
+      // Use the useBlocker hook
+      const blocker = useBlocker(shouldBlockState.shouldBlock);
+
+      // Create props object with the blocker and control function
+      const enhancedProps = {
+        ...props,
+        blocker,
+        setBlocking: setShouldBlockState,
+      } as unknown as TProps;
+
+      return <WrappedComponent {...enhancedProps} ref={ref} />;
+    },
+  );
+
+  return WithBlockerComponent;
+}
diff --git a/frontend/javascripts/libs/with_router_hoc.tsx b/frontend/javascripts/libs/with_router_hoc.tsx
new file mode 100644
index 00000000000..adf94472f66
--- /dev/null
+++ b/frontend/javascripts/libs/with_router_hoc.tsx
@@ -0,0 +1,30 @@
+import type React from "react";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+
+export type RouteComponentProps = {
+  location: ReturnType<typeof useLocation>;
+  navigate: ReturnType<typeof useNavigate>;
+  params: ReturnType<typeof useParams>;
+};
+
+/**
+ * A higher-order component (HOC) that injects React Router v6 hooks
+ * (`location`, `navigate`, and `params`) into class-based components
+ * via props.
+ *
+ * React Router v6 has removed the withRouter HOC entirely. This is a workaround for class-based components.
+ *
+ * @param Component - The class or function component to wrap.
+ * @returns A function component that passes router props to the wrapped component.
+ */
+export function withRouter<P extends RouteComponentProps>(Component: React.ComponentType<P>) {
+  function ComponentWithRouterProp(props: Omit<P, keyof RouteComponentProps>) {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const params = useParams();
+
+    return <Component {...(props as P)} navigate={navigate} location={location} params={params} />;
+  }
+
+  return ComponentWithRouterProp;
+}
diff --git a/frontend/javascripts/main.tsx b/frontend/javascripts/main.tsx
index 78ff9ad542b..573e1e2f802 100644
--- a/frontend/javascripts/main.tsx
+++ b/frontend/javascripts/main.tsx
@@ -18,7 +18,6 @@ import UserLocalStorage from "libs/user_local_storage";
 import { compress, decompress } from "lz-string";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import Router from "router";
 import { setupApi } from "viewer/api/internal_api";
 import Model from "viewer/model";
 import { setActiveOrganizationAction } from "viewer/model/actions/organization_actions";
@@ -28,7 +27,13 @@ import { setModel, setStore } from "viewer/singletons";
 import Store from "viewer/throttled_store";
 
 import "../stylesheets/main.less";
+import { CheckCertificateModal } from "components/check_certificate_modal";
+import DisableGenericDnd from "components/disable_generic_dnd";
+import { CheckTermsOfServices } from "components/terms_of_services_check";
+import { RouterProvider } from "react-router-dom";
+import router from "router/router";
 import GlobalThemeProvider, { getThemeFromUser } from "theme";
+import HelpButton from "viewer/view/help_modal";
 
 // Suppress warning emitted by Olvy because it tries to eagerly initialize
 window.OlvyConfig = null;
@@ -132,7 +137,11 @@ document.addEventListener("DOMContentLoaded", async () => {
             <DndProvider backend={HTML5Backend}>
               <GlobalThemeProvider>
                 <RootForFastTooltips />
-                <Router />
+                <DisableGenericDnd />
+                <CheckCertificateModal />
+                <CheckTermsOfServices />
+                <HelpButton />
+                <RouterProvider router={router} />
               </GlobalThemeProvider>
             </DndProvider>
           </QueryClientProvider>
diff --git a/frontend/javascripts/navbar.tsx b/frontend/javascripts/navbar.tsx
index 9146e5808cf..c498b2a6dfc 100644
--- a/frontend/javascripts/navbar.tsx
+++ b/frontend/javascripts/navbar.tsx
@@ -24,7 +24,6 @@ import {
 import classnames from "classnames";
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
-import { connect } from "react-redux";
 import { Link, useLocation } from "react-router-dom";
 
 import LoginForm from "admin/auth/login_form";
@@ -52,12 +51,11 @@ import { getAntdTheme } from "theme";
 import type { APIOrganizationCompact, APIUser, APIUserCompact } from "types/api_types";
 import constants from "viewer/constants";
 import {
-  isAnnotationFromDifferentOrganization,
+  isAnnotationFromDifferentOrganization as isAnnotationFromDifferentOrganizationAccessor,
   isAnnotationOwner as isAnnotationOwnerAccessor,
 } from "viewer/model/accessors/annotation_accessor";
 import { formatUserName } from "viewer/model/accessors/user_accessor";
 import { logoutUserAction, setActiveUserAction } from "viewer/model/actions/user_actions";
-import type { WebknossosState } from "viewer/store";
 import Store from "viewer/store";
 import { HelpModal } from "viewer/view/help_modal";
 import { PortalTarget } from "viewer/view/layouting/portal_utils";
@@ -71,23 +69,6 @@ const MAX_RENDERED_ORGANIZATION = 20;
 // exist.
 const ORGANIZATION_COUNT_THRESHOLD_FOR_SEARCH_INPUT = 10;
 
-type OwnProps = {
-  isAuthenticated: boolean;
-};
-type StateProps = {
-  activeUser: APIUser | null | undefined;
-  isInAnnotationView: boolean;
-  hasOrganizations: boolean;
-  othersMayEdit: boolean;
-  allowUpdate: boolean;
-  isLockedByOwner: boolean;
-  isAnnotationFromDifferentOrganization: boolean;
-  isAnnotationOwner: boolean;
-  annotationOwnerName: string;
-  blockedByUser: APIUserCompact | null | undefined;
-  navbarHeight: number;
-};
-type Props = OwnProps & StateProps;
 // The user should click somewhere else to close that menu like it's done in most OS menus, anyway. 10 seconds.
 const subMenuCloseDelay = 10;
 
@@ -772,20 +753,23 @@ function AnnotationLockedByOwnerTag(props: { annotationOwnerName: string; isOwne
   );
 }
 
-function Navbar({
-  activeUser,
-  isAuthenticated,
-  isInAnnotationView,
-  hasOrganizations,
-  othersMayEdit,
-  blockedByUser,
-  allowUpdate,
-  annotationOwnerName,
-  isLockedByOwner,
-  isAnnotationFromDifferentOrganization,
-  navbarHeight,
-  isAnnotationOwner,
-}: Props) {
+function Navbar({ isAuthenticated }: { isAuthenticated: boolean }) {
+  const activeUser = useWkSelector((state) => state.activeUser);
+  const isInAnnotationView = useWkSelector((state) => state.uiInformation.isInAnnotationView);
+  const hasOrganizations = useWkSelector((state) => state.uiInformation.hasOrganizations);
+  const othersMayEdit = useWkSelector((state) => state.annotation.othersMayEdit);
+  const blockedByUser = useWkSelector((state) => state.annotation.blockedByUser);
+  const allowUpdate = useWkSelector((state) => state.annotation.restrictions.allowUpdate);
+  const isLockedByOwner = useWkSelector((state) => state.annotation.isLockedByOwner);
+  const annotationOwnerName = useWkSelector((state) =>
+    formatUserName(state.activeUser, state.annotation.owner),
+  );
+  const isAnnotationOwner = useWkSelector((state) => isAnnotationOwnerAccessor(state));
+  const isAnnotationFromDifferentOrganization = useWkSelector((state) =>
+    isAnnotationFromDifferentOrganizationAccessor(state),
+  );
+  const navbarHeight = useWkSelector((state) => state.uiInformation.navbarHeight);
+
   const historyLocation = useLocation();
 
   const handleLogout = async (event: React.SyntheticEvent) => {
@@ -973,19 +957,4 @@ function GlobalProgressBar() {
   );
 }
 
-const mapStateToProps = (state: WebknossosState): StateProps => ({
-  activeUser: state.activeUser,
-  isInAnnotationView: state.uiInformation.isInAnnotationView,
-  hasOrganizations: state.uiInformation.hasOrganizations,
-  othersMayEdit: state.annotation.othersMayEdit,
-  blockedByUser: state.annotation.blockedByUser,
-  allowUpdate: state.annotation.restrictions.allowUpdate,
-  isLockedByOwner: state.annotation.isLockedByOwner,
-  annotationOwnerName: formatUserName(state.activeUser, state.annotation.owner),
-  isAnnotationOwner: isAnnotationOwnerAccessor(state),
-  isAnnotationFromDifferentOrganization: isAnnotationFromDifferentOrganization(state),
-  navbarHeight: state.uiInformation.navbarHeight,
-});
-
-const connector = connect(mapStateToProps);
-export default connector(Navbar);
+export default Navbar;
diff --git a/frontend/javascripts/router.tsx b/frontend/javascripts/router.tsx
deleted file mode 100644
index 84dcf22e2a3..00000000000
--- a/frontend/javascripts/router.tsx
+++ /dev/null
@@ -1,855 +0,0 @@
-import AcceptInviteView from "admin/auth/accept_invite_view";
-import FinishResetPasswordView from "admin/auth/finish_reset_password_view";
-import LoginView from "admin/auth/login_view";
-import RegistrationView from "admin/auth/registration_view";
-import StartResetPasswordView from "admin/auth/start_reset_password_view";
-import DatasetAddView from "admin/dataset/dataset_add_view";
-import JobListView from "admin/job/job_list_view";
-import Onboarding from "admin/onboarding";
-import OrganizationView from "admin/organization/organization_view";
-import { PricingPlanEnum } from "admin/organization/pricing_plan_utils";
-import ProjectCreateView from "admin/project/project_create_view";
-import ProjectListView from "admin/project/project_list_view";
-import {
-  createExplorational,
-  getShortLink,
-  getUnversionedAnnotationInformation,
-} from "admin/rest_api";
-import ScriptCreateView from "admin/scripts/script_create_view";
-import ScriptListView from "admin/scripts/script_list_view";
-import AvailableTasksReportView from "admin/statistic/available_tasks_report_view";
-import ProjectProgressReportView from "admin/statistic/project_progress_report_view";
-import TaskCreateFormView from "admin/task/task_create_form_view";
-import TaskCreateView from "admin/task/task_create_view";
-import TaskListView from "admin/task/task_list_view";
-import TaskTypeCreateView from "admin/tasktype/task_type_create_view";
-import TaskTypeListView from "admin/tasktype/task_type_list_view";
-import TeamListView from "admin/team/team_list_view";
-import UserListView from "admin/user/user_list_view";
-import { Button, Col, Layout, Result, Row } from "antd";
-import DisableGenericDnd from "components/disable_generic_dnd";
-import { Imprint, Privacy } from "components/legal";
-import AsyncRedirect from "components/redirect";
-import SecuredRoute from "components/secured_route";
-import DashboardView, { urlTokenToTabKeyMap } from "dashboard/dashboard_view";
-import DatasetSettingsView from "dashboard/dataset/dataset_settings_view";
-import PublicationDetailView from "dashboard/publication_details_view";
-import features from "features";
-import { createBrowserHistory } from "history";
-import * as Utils from "libs/utils";
-import { coalesce } from "libs/utils";
-import window from "libs/window";
-import _ from "lodash";
-import Navbar from "navbar";
-import React from "react";
-import { connect } from "react-redux";
-// @ts-expect-error ts-migrate(2305) FIXME: Module '"react-router-dom"' has no exported member... Remove this comment to see the full error message
-import { type ContextRouter, Link, type RouteProps } from "react-router-dom";
-import { Redirect, Route, Router, Switch } from "react-router-dom";
-import {
-  APICompoundTypeEnum,
-  type APIMagRestrictions,
-  type APIUser,
-  TracingTypeEnum,
-} from "types/api_types";
-import { ControlModeEnum } from "viewer/constants";
-import type { WebknossosState } from "viewer/store";
-import HelpButton from "viewer/view/help_modal";
-import TracingLayoutView from "viewer/view/layouting/tracing_layout_view";
-
-import AccountSettingsView from "admin/account/account_settings_view";
-import {
-  getDatasetIdFromNameAndOrganization,
-  getOrganizationForDataset,
-} from "admin/api/disambiguate_legacy_routes";
-import VerifyEmailView from "admin/auth/verify_email_view";
-import { DatasetURLImport } from "admin/dataset/dataset_url_import";
-import TimeTrackingOverview from "admin/statistic/time_tracking_overview";
-import AiModelListView from "admin/voxelytics/ai_model_list_view";
-import { CheckCertificateModal } from "components/check_certificate_modal";
-import ErrorBoundary from "components/error_boundary";
-import { CheckTermsOfServices } from "components/terms_of_services_check";
-import loadable from "libs/lazy_loader";
-import type { EmptyObject } from "types/globals";
-import { getDatasetIdOrNameFromReadableURLPart } from "viewer/model/accessors/dataset_accessor";
-import { Store } from "viewer/singletons";
-import { CommandPalette } from "viewer/view/components/command_palette";
-
-const { Content } = Layout;
-
-const AsyncWorkflowView = loadable<EmptyObject>(() => import("admin/voxelytics/workflow_view"));
-const AsyncWorkflowListView = loadable<EmptyObject>(
-  () => import("admin/voxelytics/workflow_list_view"),
-);
-
-type StateProps = {
-  activeUser: APIUser | null | undefined;
-  hasOrganizations: boolean;
-  pricingPlan: PricingPlanEnum;
-  isAdminView: boolean;
-};
-type Props = StateProps;
-const browserHistory = createBrowserHistory();
-
-function PageNotFoundView() {
-  return (
-    <Row justify="center" align="middle" className="background-organelles">
-      <Col>
-        <Result
-          icon={<i className="drawing drawing-404" />}
-          status="warning"
-          title={
-            <span style={{ color: "white" }}>Sorry, the page you visited does not exist.</span>
-          }
-          style={{ height: "100%" }}
-          extra={[
-            <Link to="/" key="return-to-dashboard">
-              <Button>Back to Dashboard</Button>
-            </Link>,
-          ]}
-        />
-      </Col>
-    </Row>
-  );
-}
-
-type GetComponentProps<T> = T extends React.ComponentType<infer P> | React.Component<infer P>
-  ? P
-  : never;
-
-const RouteWithErrorBoundary: React.FC<RouteProps> = (props) => {
-  return (
-    <ErrorBoundary key={props.location?.pathname}>
-      <Route {...props} />
-    </ErrorBoundary>
-  );
-};
-
-const SecuredRouteWithErrorBoundary: React.FC<GetComponentProps<typeof SecuredRoute>> = (props) => {
-  return (
-    // @ts-expect-error Accessing props.location works as intended.
-    <ErrorBoundary key={props.location?.pathname}>
-      <SecuredRoute {...props} />
-    </ErrorBoundary>
-  );
-};
-
-class ReactRouter extends React.Component<Props> {
-  tracingView = ({ match }: ContextRouter) => {
-    const initialMaybeCompoundType =
-      match.params.type != null ? coalesce(APICompoundTypeEnum, match.params.type) : null;
-
-    return (
-      <TracingLayoutView
-        initialMaybeCompoundType={initialMaybeCompoundType}
-        initialCommandType={{
-          type: ControlModeEnum.TRACE,
-          annotationId: match.params.id || "",
-        }}
-      />
-    );
-  };
-
-  tracingSandboxLegacy = ({ match }: ContextRouter) => {
-    const tracingType = coalesce(TracingTypeEnum, match.params.type);
-    if (tracingType == null) {
-      return <h3>Invalid annotation URL.</h3>;
-    }
-    const getParams = Utils.getUrlParamsObjectFromString(location.search);
-    return (
-      <AsyncRedirect
-        redirectTo={async () => {
-          const datasetName = match.params.datasetName || "";
-          const organizationId = match.params.organizationId || "";
-          const datasetId = await getDatasetIdFromNameAndOrganization(
-            datasetName,
-            organizationId,
-            getParams.token,
-          );
-          return `/datasets/${datasetName}-${datasetId}/sandbox/${tracingType}${location.search}${location.hash}`;
-        }}
-      />
-    );
-  };
-
-  tracingSandbox = ({ match }: ContextRouter) => {
-    const tracingType = coalesce(TracingTypeEnum, match.params.type);
-    const { datasetId, datasetName } = getDatasetIdOrNameFromReadableURLPart(
-      match.params.datasetNameAndId,
-    );
-    const getParams = Utils.getUrlParamsObjectFromString(location.search);
-
-    if (tracingType == null) {
-      return <h3>Invalid annotation URL.</h3>;
-    }
-    if (datasetName) {
-      // Handle very old legacy URLs which neither have a datasetId nor an organizationId.
-      // The schema is something like <authority>/datasets/:datasetName/sandbox/<type>
-      return (
-        <AsyncRedirect
-          redirectTo={async () => {
-            const organizationId = await getOrganizationForDataset(datasetName, getParams.token);
-            const datasetId = await getDatasetIdFromNameAndOrganization(
-              datasetName,
-              organizationId,
-              getParams.token,
-            );
-            return `/datasets/${datasetName}-${datasetId}/sandbox/${tracingType}${location.search}${location.hash}`;
-          }}
-        />
-      );
-    }
-    return (
-      <TracingLayoutView
-        initialMaybeCompoundType={null}
-        initialCommandType={{
-          type: ControlModeEnum.SANDBOX,
-          tracingType,
-          datasetId: datasetId || "",
-        }}
-      />
-    );
-  };
-
-  tracingViewModeLegacy = ({ match, location }: ContextRouter) => {
-    const getParams = Utils.getUrlParamsObjectFromString(location.search);
-    return (
-      <AsyncRedirect
-        redirectTo={async () => {
-          const datasetName = match.params.datasetName || "";
-          const organizationId = match.params.organizationId || "";
-          const datasetId = await getDatasetIdFromNameAndOrganization(
-            datasetName,
-            organizationId,
-            getParams.token,
-          );
-          return `/datasets/${datasetName}-${datasetId}/view${location.search}${location.hash}`;
-        }}
-      />
-    );
-  };
-
-  tracingViewMode = ({ match }: ContextRouter) => {
-    const { datasetId, datasetName } = getDatasetIdOrNameFromReadableURLPart(
-      match.params.datasetNameAndId,
-    );
-    const getParams = Utils.getUrlParamsObjectFromString(location.search);
-    if (datasetName) {
-      // Handle very old legacy URLs which neither have a datasetId nor an organizationId.
-      // The schema is something like <authority>/datasets/:datasetName/view
-      return (
-        <AsyncRedirect
-          redirectTo={async () => {
-            const organizationId = await getOrganizationForDataset(datasetName, getParams.token);
-            const datasetId = await getDatasetIdFromNameAndOrganization(
-              datasetName,
-              organizationId,
-              getParams.token,
-            );
-            return `/datasets/${datasetName}-${datasetId}/view${location.search}${location.hash}`;
-          }}
-        />
-      );
-    }
-    return (
-      <TracingLayoutView
-        initialMaybeCompoundType={null}
-        initialCommandType={{
-          type: ControlModeEnum.VIEW,
-          datasetId: datasetId || "",
-        }}
-      />
-    );
-  };
-
-  serverAuthenticationCallback = async ({ match }: ContextRouter) => {
-    try {
-      const annotationInformation = await getUnversionedAnnotationInformation(
-        match.params.id || "",
-      );
-      return annotationInformation.visibility === "Public";
-    } catch (_ex) {
-      // Annotation could not be found
-    }
-
-    return false;
-  };
-
-  render() {
-    const isAuthenticated = this.props.activeUser !== null;
-    return (
-      <Router history={browserHistory}>
-        <Layout>
-          <DisableGenericDnd />
-          <CheckCertificateModal />
-          {
-            /* within tracing view, the command palette is rendered in the status bar. */
-            isAuthenticated && this.props.isAdminView && <CommandPalette label={null} />
-          }
-          <CheckTermsOfServices />
-          <Navbar isAuthenticated={isAuthenticated} />
-          <HelpButton />
-          <Content>
-            <Switch>
-              <RouteWithErrorBoundary
-                exact
-                path="/"
-                render={() => {
-                  if (!this.props.hasOrganizations && !features().isWkorgInstance) {
-                    return <Redirect to="/onboarding" />;
-                  }
-
-                  if (isAuthenticated) {
-                    return <DashboardView userId={null} isAdminView={false} initialTabKey={null} />;
-                  }
-
-                  return <Redirect to="/auth/login" />;
-                }}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/dashboard/:tab"
-                render={({ match }: ContextRouter) => {
-                  const tab: string = match.params.tab;
-                  const initialTabKey =
-                    // @ts-ignore If tab does not exist in urlTokenToTabKeyMap, initialTabKey is still valid (i.e., undefined)
-                    tab ? urlTokenToTabKeyMap[tab] : null;
-                  return (
-                    <DashboardView
-                      userId={null}
-                      isAdminView={false}
-                      initialTabKey={initialTabKey}
-                    />
-                  );
-                }}
-              />
-
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/dashboard/datasets/:folderIdWithName"
-                render={() => {
-                  const initialTabKey = "datasets";
-                  return (
-                    <DashboardView
-                      userId={null}
-                      isAdminView={false}
-                      initialTabKey={initialTabKey}
-                    />
-                  );
-                }}
-              />
-
-              <RouteWithErrorBoundary
-                path="/dashboard"
-                render={() => {
-                  // Imperatively access store state to avoid race condition when logging in.
-                  // The `isAuthenticated` prop could be outdated for a short time frame which
-                  // would lead to an unnecessary browser refresh.
-                  const { activeUser } = Store.getState();
-                  if (activeUser) {
-                    return <DashboardView userId={null} isAdminView={false} initialTabKey={null} />;
-                  }
-
-                  // Hard navigate so that webknossos.org is shown for the wkorg instance.
-                  window.location.href = "/";
-                  return null;
-                }}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/users/:userId/details"
-                requiresAdminOrManagerRole
-                render={({ match }: ContextRouter) => (
-                  <DashboardView
-                    userId={match.params.userId}
-                    isAdminView={match.params.userId !== null}
-                    initialTabKey={null}
-                  />
-                )}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/users"
-                component={UserListView}
-                requiresAdminOrManagerRole
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/import"
-                component={DatasetURLImport}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/teams"
-                component={TeamListView}
-                requiresAdminOrManagerRole
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/timetracking"
-                component={TimeTrackingOverview}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                requiredPricingPlan={PricingPlanEnum.Team}
-                path="/reports/projectProgress"
-                component={ProjectProgressReportView}
-                requiresAdminOrManagerRole
-                exact
-              />
-              <RouteWithErrorBoundary
-                path="/reports/openTasks"
-                render={() => <Redirect to="/reports/availableTasks" />}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                requiredPricingPlan={PricingPlanEnum.Team}
-                path="/reports/availableTasks"
-                component={AvailableTasksReportView}
-                requiresAdminOrManagerRole
-                exact
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/tasks"
-                requiredPricingPlan={PricingPlanEnum.Team}
-                component={TaskListView}
-                requiresAdminOrManagerRole
-                exact
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/tasks/create"
-                requiredPricingPlan={PricingPlanEnum.Team}
-                component={TaskCreateView}
-                requiresAdminOrManagerRole
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/tasks/:taskId/edit"
-                requiredPricingPlan={PricingPlanEnum.Team}
-                requiresAdminOrManagerRole
-                render={({ match }: ContextRouter) => (
-                  <TaskCreateFormView taskId={match.params.taskId} />
-                )}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/tasks/:taskId"
-                requiredPricingPlan={PricingPlanEnum.Team}
-                requiresAdminOrManagerRole
-                render={({ match }: ContextRouter) => (
-                  <TaskListView
-                    initialFieldValues={{
-                      taskId: match.params.taskId || "",
-                    }}
-                  />
-                )}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/projects"
-                requiredPricingPlan={PricingPlanEnum.Team}
-                requiresAdminOrManagerRole
-                render={(
-                  { location }: ContextRouter, // Strip the leading # away. If there is no hash, "".slice(1) will evaluate to "", too.
-                ) => <ProjectListView initialSearchValue={location.hash.slice(1)} />}
-                exact
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/projects/create"
-                requiredPricingPlan={PricingPlanEnum.Team}
-                requiresAdminOrManagerRole
-                render={() => <ProjectCreateView />}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/projects/:projectId/tasks"
-                requiredPricingPlan={PricingPlanEnum.Team}
-                requiresAdminOrManagerRole
-                render={({ match }: ContextRouter) => (
-                  <TaskListView
-                    initialFieldValues={{
-                      projectId: match.params.projectId || "",
-                    }}
-                  />
-                )}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/projects/:projectId/edit"
-                requiredPricingPlan={PricingPlanEnum.Team}
-                requiresAdminOrManagerRole
-                render={({ match }: ContextRouter) => (
-                  <ProjectCreateView projectId={match.params.projectId} />
-                )}
-              />
-              <SecuredRoute
-                isAuthenticated={isAuthenticated}
-                path="/annotations/:type/:id"
-                render={({ location, match }: ContextRouter) => {
-                  const initialMaybeCompoundType =
-                    match.params.type != null
-                      ? coalesce(APICompoundTypeEnum, match.params.type)
-                      : null;
-
-                  if (initialMaybeCompoundType == null) {
-                    const { hash, search } = location;
-                    return <Redirect to={`/annotations/${match.params.id}${search}${hash}`} />;
-                  }
-
-                  return this.tracingView({ match });
-                }}
-                serverAuthenticationCallback={this.serverAuthenticationCallback}
-              />
-              <SecuredRoute
-                isAuthenticated={isAuthenticated}
-                path="/annotations/:id"
-                render={this.tracingView}
-                serverAuthenticationCallback={this.serverAuthenticationCallback}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/datasets/upload"
-                requiresAdminOrManagerRole
-                render={() => <DatasetAddView />}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/datasets/:datasetNameAndId/edit"
-                requiresAdminOrManagerRole
-                render={({ match }: ContextRouter) => {
-                  const { datasetId, datasetName } = getDatasetIdOrNameFromReadableURLPart(
-                    match.params.datasetNameAndId,
-                  );
-                  const getParams = Utils.getUrlParamsObjectFromString(location.search);
-                  if (datasetName) {
-                    // Handle very old legacy URLs which neither have a datasetId nor an organizationId.
-                    // The schema is something like <authority>/datasets/:datasetName/edit
-                    return (
-                      <AsyncRedirect
-                        redirectTo={async () => {
-                          const organizationId = await getOrganizationForDataset(
-                            datasetName,
-                            getParams.token,
-                          );
-                          const datasetId = await getDatasetIdFromNameAndOrganization(
-                            datasetName,
-                            organizationId,
-                            getParams.token,
-                          );
-                          return `/datasets/${datasetName}-${datasetId}/edit`;
-                        }}
-                      />
-                    );
-                  }
-                  return (
-                    <DatasetSettingsView
-                      isEditingMode
-                      datasetId={datasetId || ""}
-                      onComplete={() => window.history.back()}
-                      onCancel={() => window.history.back()}
-                    />
-                  );
-                }}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/taskTypes"
-                requiresAdminOrManagerRole
-                render={(
-                  { location }: ContextRouter, // Strip the leading # away. If there is no hash, "".slice(1) will evaluate to "", too.
-                ) => <TaskTypeListView initialSearchValue={location.hash.slice(1)} />}
-                exact
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/taskTypes/create"
-                requiredPricingPlan={PricingPlanEnum.Team}
-                component={TaskTypeCreateView}
-                requiresAdminOrManagerRole
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/taskTypes/:taskTypeId/edit"
-                requiredPricingPlan={PricingPlanEnum.Team}
-                render={({ match }: ContextRouter) => (
-                  <TaskTypeCreateView taskTypeId={match.params.taskTypeId} />
-                )}
-                requiresAdminOrManagerRole
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/taskTypes/:taskTypeId/tasks"
-                requiredPricingPlan={PricingPlanEnum.Team}
-                render={({ match }: ContextRouter) => (
-                  <TaskListView
-                    initialFieldValues={{
-                      taskTypeId: match.params.taskTypeId || "",
-                    }}
-                  />
-                )}
-                requiresAdminOrManagerRole
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/taskTypes/:taskTypeId/projects"
-                requiredPricingPlan={PricingPlanEnum.Team}
-                render={({ match }: ContextRouter) => (
-                  <ProjectListView taskTypeId={match.params.taskTypeId || ""} />
-                )}
-                requiresAdminOrManagerRole
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/scripts/create"
-                render={() => <ScriptCreateView />}
-                requiresAdminOrManagerRole
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/scripts/:scriptId/edit"
-                requiresAdminOrManagerRole
-                render={({ match }: ContextRouter) => (
-                  <ScriptCreateView scriptId={match.params.scriptId} />
-                )}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/scripts"
-                component={ScriptListView}
-                requiresAdminOrManagerRole
-                exact
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/jobs"
-                render={() => <JobListView />}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/organizations/:organizationId"
-                render={() => <Redirect to="/organization" />}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/organization"
-                render={() => <OrganizationView />}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/organization/:tab"
-                render={() => <OrganizationView />}
-              />
-              <RouteWithErrorBoundary
-                path="/help/keyboardshortcuts"
-                render={() => (
-                  <Redirect to="https://docs.webknossos.org/webknossos/ui/keyboard_shortcuts.html" />
-                )}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/auth/token"
-                render={() => <Redirect to="/account/token" />}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/auth/changePassword"
-                render={() => <Redirect to="/account/password" />}
-              />
-              <RouteWithErrorBoundary path="/login" render={() => <Redirect to="/auth/login" />} />
-
-              <RouteWithErrorBoundary
-                path="/invite/:token"
-                render={({ match }: ContextRouter) => (
-                  <AcceptInviteView
-                    activeUser={this.props.activeUser}
-                    token={match.params.token || ""}
-                  />
-                )}
-              />
-
-              <RouteWithErrorBoundary
-                path="/verifyEmail/:token"
-                render={({ match }: ContextRouter) => (
-                  <VerifyEmailView token={match.params.token || ""} />
-                )}
-              />
-
-              <RouteWithErrorBoundary
-                path="/signup"
-                render={() => <Redirect to="/auth/signup" />}
-              />
-              <RouteWithErrorBoundary
-                path="/register"
-                render={() => <Redirect to="/auth/signup" />}
-              />
-              <RouteWithErrorBoundary
-                path="/auth/register"
-                render={() => <Redirect to="/auth/signup" />}
-              />
-              <RouteWithErrorBoundary
-                path="/auth/login"
-                render={() => (isAuthenticated ? <Redirect to="/" /> : <LoginView />)}
-              />
-              <RouteWithErrorBoundary
-                path="/auth/signup"
-                render={() => (isAuthenticated ? <Redirect to="/" /> : <RegistrationView />)}
-              />
-
-              <RouteWithErrorBoundary
-                path="/auth/resetPassword"
-                component={StartResetPasswordView}
-              />
-              <RouteWithErrorBoundary
-                path="/auth/finishResetPassword"
-                render={({ location }: ContextRouter) => {
-                  const params = Utils.getUrlParamsObjectFromString(location.search);
-                  return <FinishResetPasswordView resetToken={params.token} />;
-                }}
-              />
-              {/* legacy view mode route */}
-              <RouteWithErrorBoundary
-                path="/datasets/:organizationId/:datasetName/view"
-                render={this.tracingViewModeLegacy}
-              />
-              <Route path="/datasets/:datasetNameAndId/view" render={this.tracingViewMode} />
-              <RouteWithErrorBoundary
-                path="/datasets/:datasetNameAndId/sandbox/:type"
-                render={this.tracingSandbox}
-              />
-              {/* legacy sandbox route */}
-              <RouteWithErrorBoundary
-                path="/datasets/:organizationId/:datasetName/sandbox/:type"
-                render={this.tracingSandboxLegacy}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/datasets/:datasetId/createExplorative/:type"
-                render={({ match }: ContextRouter) => (
-                  <AsyncRedirect
-                    pushToHistory={false}
-                    redirectTo={async () => {
-                      if (!match.params.datasetId || !match.params.type) {
-                        // Typehint for TS
-                        throw new Error("Invalid URL");
-                      }
-
-                      const datasetId = match.params.datasetId;
-                      const type =
-                        coalesce(TracingTypeEnum, match.params.type) || TracingTypeEnum.skeleton;
-                      const getParams = Utils.getUrlParamsObjectFromString(location.search);
-                      const { autoFallbackLayer, fallbackLayerName } = getParams;
-                      const magRestrictions: APIMagRestrictions = {};
-
-                      if (getParams.minMag !== undefined) {
-                        magRestrictions.min = Number.parseInt(getParams.minMag);
-
-                        if (!_.isNumber(magRestrictions.min)) {
-                          throw new Error("Invalid minMag parameter");
-                        }
-
-                        if (getParams.maxMag !== undefined) {
-                          magRestrictions.max = Number.parseInt(getParams.maxMag);
-
-                          if (!_.isNumber(magRestrictions.max)) {
-                            throw new Error("Invalid maxMag parameter");
-                          }
-                        }
-                      }
-
-                      const annotation = await createExplorational(
-                        datasetId,
-                        type,
-                        !!autoFallbackLayer,
-                        fallbackLayerName,
-                        null,
-                        magRestrictions,
-                      );
-                      return `/annotations/${annotation.id}`;
-                    }}
-                  />
-                )}
-              />
-              {
-                // Note that this route has to be beneath all others sharing the same prefix,
-                // to avoid url mismatching
-              }
-              {/*legacy view mode route */}
-              <RouteWithErrorBoundary
-                path="/datasets/:organizationId/:datasetName"
-                render={this.tracingViewModeLegacy}
-              />
-              <Route path="/datasets/:datasetNameAndId" render={this.tracingViewMode} />
-              <RouteWithErrorBoundary
-                path="/publications/:id"
-                render={({ match }: ContextRouter) => (
-                  <PublicationDetailView publicationId={match.params.id || ""} />
-                )}
-              />
-              <Redirect from="/publication/:id" to="/publications/:id" />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/workflows"
-                component={AsyncWorkflowListView}
-                exact
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/aiModels"
-                component={AiModelListView}
-                exact
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/workflows/:workflowName"
-                component={AsyncWorkflowView}
-              />
-              <RouteWithErrorBoundary path="/imprint" component={Imprint} />
-              <RouteWithErrorBoundary path="/privacy" component={Privacy} />
-              <RouteWithErrorBoundary
-                path="/links/:key"
-                render={({ match }: ContextRouter) => (
-                  <AsyncRedirect
-                    redirectTo={async () => {
-                      const key = match.params.key || "";
-                      const shortLink = await getShortLink(key);
-                      return shortLink.longLink;
-                    }}
-                  />
-                )}
-              />
-              {!features().isWkorgInstance && (
-                <RouteWithErrorBoundary path="/onboarding" component={Onboarding} />
-              )}
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/account"
-                render={() => <AccountSettingsView />}
-              />
-              <SecuredRouteWithErrorBoundary
-                isAuthenticated={isAuthenticated}
-                path="/account/:tab"
-                render={() => <AccountSettingsView />}
-              />
-              <RouteWithErrorBoundary component={PageNotFoundView} />
-            </Switch>
-          </Content>
-        </Layout>
-      </Router>
-    );
-  }
-}
-
-const mapStateToProps = (state: WebknossosState): StateProps => ({
-  activeUser: state.activeUser,
-  pricingPlan: state.activeOrganization
-    ? state.activeOrganization.pricingPlan
-    : PricingPlanEnum.Basic,
-  hasOrganizations: state.uiInformation.hasOrganizations,
-  isAdminView: !state.uiInformation.isInAnnotationView,
-});
-
-const connector = connect(mapStateToProps);
-export default connector(ReactRouter);
diff --git a/frontend/javascripts/router/page_not_found_view.tsx b/frontend/javascripts/router/page_not_found_view.tsx
new file mode 100644
index 00000000000..c4e28cbb4cd
--- /dev/null
+++ b/frontend/javascripts/router/page_not_found_view.tsx
@@ -0,0 +1,24 @@
+import { Button, Col, Result, Row } from "antd";
+import { Link } from "react-router-dom";
+
+export function PageNotFoundView() {
+  return (
+    <Row justify="center" align="middle" className="background-organelles">
+      <Col>
+        <Result
+          icon={<i className="drawing drawing-404" />}
+          status="warning"
+          title={
+            <span style={{ color: "white" }}>Sorry, the page you visited does not exist.</span>
+          }
+          style={{ height: "100%" }}
+          extra={[
+            <Link to="/" key="return-to-dashboard">
+              <Button>Back to Dashboard</Button>
+            </Link>,
+          ]}
+        />
+      </Col>
+    </Row>
+  );
+}
diff --git a/frontend/javascripts/router/route_wrappers.tsx b/frontend/javascripts/router/route_wrappers.tsx
new file mode 100644
index 00000000000..3021c2cebb9
--- /dev/null
+++ b/frontend/javascripts/router/route_wrappers.tsx
@@ -0,0 +1,305 @@
+import {
+  getDatasetIdFromNameAndOrganization,
+  getOrganizationForDataset,
+} from "admin/api/disambiguate_legacy_routes";
+import Onboarding from "admin/onboarding";
+import { createExplorational, getShortLink } from "admin/rest_api";
+import AsyncRedirect from "components/redirect";
+import DashboardView, { urlTokenToTabKeyMap } from "dashboard/dashboard_view";
+import DatasetSettingsView from "dashboard/dataset/dataset_settings_view";
+import features from "features";
+import { useWkSelector } from "libs/react_hooks";
+import * as Utils from "libs/utils";
+import { coalesce } from "libs/utils";
+import window from "libs/window";
+import { isNumber } from "lodash";
+import { Navigate, useLocation, useParams } from "react-router-dom";
+import { APICompoundTypeEnum, type APIMagRestrictions, TracingTypeEnum } from "types/api_types";
+import { ControlModeEnum } from "viewer/constants";
+import { getDatasetIdOrNameFromReadableURLPart } from "viewer/model/accessors/dataset_accessor";
+import { Store } from "viewer/singletons";
+import TracingLayoutView from "viewer/view/layouting/tracing_layout_view";
+import { PageNotFoundView } from "./page_not_found_view";
+
+export function RootRouteWrapper() {
+  const isAuthenticated = useWkSelector((state) => state.activeUser != null);
+  const hasOrganizations = useWkSelector((state) => state.uiInformation.hasOrganizations);
+
+  if (!hasOrganizations && !features()?.isWkorgInstance) {
+    return <Navigate to="/onboarding" />;
+  }
+
+  if (isAuthenticated) {
+    return <DashboardView userId={null} isAdminView={false} initialTabKey={null} />;
+  }
+
+  return <Navigate to="/auth/login" />;
+}
+
+export function DashboardRouteRootWrapper() {
+  // Imperatively access store state to avoid race condition when logging in.
+  // The `isAuthenticated` prop could be outdated for a short time frame which
+  // would lead to an unnecessary browser refresh.
+  const { activeUser } = Store.getState();
+  if (activeUser) {
+    return <DashboardView userId={null} isAdminView={false} initialTabKey={null} />;
+  }
+
+  // Hard navigate so that webknossos.org is shown for the wkorg instance.
+  window.location.href = "/";
+  return null;
+}
+
+export function DashboardRouteWrapper() {
+  const { tab } = useParams();
+  const initialTabKey =
+    // @ts-ignore If tab does not exist in urlTokenToTabKeyMap, initialTabKey is still valid (i.e., undefined)
+    tab ? urlTokenToTabKeyMap[tab] : null;
+  return <DashboardView userId={null} isAdminView={false} initialTabKey={initialTabKey} />;
+}
+
+export function UserDetailsRouteWrapper() {
+  const { userId } = useParams();
+  return <DashboardView userId={userId} isAdminView={userId !== null} initialTabKey={null} />;
+}
+
+export function AnnotationsRouteWrapper() {
+  const { type, id } = useParams();
+  const location = useLocation();
+  const initialMaybeCompoundType = type != null ? coalesce(APICompoundTypeEnum, type) : null;
+
+  if (initialMaybeCompoundType == null) {
+    const { hash, search } = location;
+    return <Navigate to={`/annotations/${id}${search}${hash}`} />;
+  }
+
+  return <TracingViewRouteWrapper />;
+}
+
+export function DatasetSettingsRouteWrapper() {
+  const { datasetNameAndId = "" } = useParams();
+  const location = useLocation();
+  const { datasetId, datasetName } = getDatasetIdOrNameFromReadableURLPart(datasetNameAndId);
+  const getParams = Utils.getUrlParamsObjectFromString(location.search);
+  if (datasetName) {
+    // Handle very old legacy URLs which neither have a datasetId nor an organizationId.
+    // The schema is something like <authority>/datasets/:datasetName/edit
+    return (
+      <AsyncRedirect
+        redirectTo={async () => {
+          const organizationId = await getOrganizationForDataset(datasetName, getParams.token);
+          const datasetId = await getDatasetIdFromNameAndOrganization(
+            datasetName,
+            organizationId,
+            getParams.token,
+          );
+          return `/datasets/${datasetName}-${datasetId}/edit`;
+        }}
+      />
+    );
+  }
+  return (
+    <DatasetSettingsView
+      isEditingMode
+      datasetId={datasetId || ""}
+      onComplete={() => window.history.back()}
+      onCancel={() => window.history.back()}
+    />
+  );
+}
+
+export function CreateExplorativeRouteWrapper() {
+  const { datasetId, type } = useParams();
+  const location = useLocation();
+
+  return (
+    <AsyncRedirect
+      pushToHistory={false}
+      redirectTo={async () => {
+        if (!datasetId || !type) {
+          // Typehint for TS
+          throw new Error("Invalid URL");
+        }
+
+        const tracingType = coalesce(TracingTypeEnum, type) || TracingTypeEnum.skeleton;
+        const { autoFallbackLayer, fallbackLayerName, minMag, maxMag } =
+          Utils.getUrlParamsObjectFromString(location.search);
+        const magRestrictions: APIMagRestrictions = {};
+
+        if (minMag !== undefined) {
+          magRestrictions.min = Number.parseInt(minMag);
+
+          if (!isNumber(magRestrictions.min)) {
+            throw new Error("Invalid minMag parameter");
+          }
+
+          if (maxMag !== undefined) {
+            magRestrictions.max = Number.parseInt(maxMag);
+
+            if (!isNumber(magRestrictions.max)) {
+              throw new Error("Invalid maxMag parameter");
+            }
+          }
+        }
+
+        const annotation = await createExplorational(
+          datasetId,
+          tracingType,
+          !!autoFallbackLayer,
+          fallbackLayerName,
+          null,
+          magRestrictions,
+        );
+        return `/annotations/${annotation.id}`;
+      }}
+    />
+  );
+}
+
+export function ShortLinksRouteWrapper() {
+  const { key = "" } = useParams();
+  return (
+    <AsyncRedirect
+      redirectTo={async () => {
+        const shortLink = await getShortLink(key);
+        return shortLink.longLink;
+      }}
+    />
+  );
+}
+
+export function TracingViewRouteWrapper() {
+  const { type, id } = useParams();
+  const initialMaybeCompoundType = type != null ? coalesce(APICompoundTypeEnum, type) : null;
+
+  return (
+    <TracingLayoutView
+      initialMaybeCompoundType={initialMaybeCompoundType}
+      initialCommandType={{
+        type: ControlModeEnum.TRACE,
+        annotationId: id || "",
+      }}
+    />
+  );
+}
+
+export function TracingSandboxLegacyRouteWrapper() {
+  const { type, datasetName = "", organizationId = "" } = useParams();
+  const location = useLocation();
+
+  const tracingType = coalesce(TracingTypeEnum, type);
+  if (tracingType == null) {
+    return <h3>Invalid annotation URL.</h3>;
+  }
+  const getParams = Utils.getUrlParamsObjectFromString(location.search);
+  return (
+    <AsyncRedirect
+      redirectTo={async () => {
+        const datasetId = await getDatasetIdFromNameAndOrganization(
+          datasetName,
+          organizationId,
+          getParams.token,
+        );
+        return `/datasets/${datasetName}-${datasetId}/sandbox/${tracingType}${location.search}${location.hash}`;
+      }}
+    />
+  );
+}
+
+export function TracingSandboxRouteWrapper() {
+  const { type, datasetNameAndId = "" } = useParams();
+  const location = useLocation();
+
+  const tracingType = coalesce(TracingTypeEnum, type);
+  const { datasetId, datasetName } = getDatasetIdOrNameFromReadableURLPart(datasetNameAndId);
+  const getParams = Utils.getUrlParamsObjectFromString(location.search);
+
+  if (tracingType == null) {
+    return <h3>Invalid annotation URL.</h3>;
+  }
+  if (datasetName) {
+    // Handle very old legacy URLs which neither have a datasetId nor an organizationId.
+    // The schema is something like <authority>/datasets/:datasetName/sandbox/<type>
+    return (
+      <AsyncRedirect
+        redirectTo={async () => {
+          const organizationId = await getOrganizationForDataset(datasetName, getParams.token);
+          const datasetId = await getDatasetIdFromNameAndOrganization(
+            datasetName,
+            organizationId,
+            getParams.token,
+          );
+          return `/datasets/${datasetName}-${datasetId}/sandbox/${tracingType}${location.search}${location.hash}`;
+        }}
+      />
+    );
+  }
+  return (
+    <TracingLayoutView
+      initialMaybeCompoundType={null}
+      initialCommandType={{
+        type: ControlModeEnum.SANDBOX,
+        tracingType,
+        datasetId: datasetId || "",
+      }}
+    />
+  );
+}
+
+export function TracingViewModeLegacyWrapper() {
+  const { datasetName = "", organizationId = "" } = useParams();
+  const location = useLocation();
+  const getParams = Utils.getUrlParamsObjectFromString(location.search);
+
+  return (
+    <AsyncRedirect
+      redirectTo={async () => {
+        const datasetId = await getDatasetIdFromNameAndOrganization(
+          datasetName,
+          organizationId,
+          getParams.token,
+        );
+        return `/datasets/${datasetName}-${datasetId}/view${location.search}${location.hash}`;
+      }}
+    />
+  );
+}
+
+export function TracingViewModeRouteWrapper() {
+  const { datasetNameAndId = "" } = useParams();
+  const location = useLocation();
+
+  const { datasetId, datasetName } = getDatasetIdOrNameFromReadableURLPart(datasetNameAndId);
+  const getParams = Utils.getUrlParamsObjectFromString(location.search);
+
+  if (datasetName) {
+    // Handle very old legacy URLs which neither have a datasetId nor an organizationId.
+    // The schema is something like <authority>/datasets/:datasetName/view
+    return (
+      <AsyncRedirect
+        redirectTo={async () => {
+          const organizationId = await getOrganizationForDataset(datasetName, getParams.token);
+          const datasetId = await getDatasetIdFromNameAndOrganization(
+            datasetName,
+            organizationId,
+            getParams.token,
+          );
+          return `/datasets/${datasetName}-${datasetId}/view${location.search}${location.hash}`;
+        }}
+      />
+    );
+  }
+  return (
+    <TracingLayoutView
+      initialMaybeCompoundType={null}
+      initialCommandType={{
+        type: ControlModeEnum.VIEW,
+        datasetId: datasetId || "",
+      }}
+    />
+  );
+}
+
+export function OnboardingRouteWrapper() {
+  return !features()?.isWkorgInstance ? <Onboarding /> : <PageNotFoundView />;
+}
diff --git a/frontend/javascripts/router/router.tsx b/frontend/javascripts/router/router.tsx
new file mode 100644
index 00000000000..e23b9eea217
--- /dev/null
+++ b/frontend/javascripts/router/router.tsx
@@ -0,0 +1,464 @@
+import AcceptInviteView from "admin/auth/accept_invite_view";
+import FinishResetPasswordView from "admin/auth/finish_reset_password_view";
+import LoginView from "admin/auth/login_view";
+import RegistrationView from "admin/auth/registration_view";
+import StartResetPasswordView from "admin/auth/start_reset_password_view";
+import DatasetAddView from "admin/dataset/dataset_add_view";
+import JobListView from "admin/job/job_list_view";
+import OrganizationView from "admin/organization/organization_view";
+import { PricingPlanEnum } from "admin/organization/pricing_plan_utils";
+import ProjectCreateView from "admin/project/project_create_view";
+import ProjectListView from "admin/project/project_list_view";
+import ScriptCreateView from "admin/scripts/script_create_view";
+import ScriptListView from "admin/scripts/script_list_view";
+import AvailableTasksReportView from "admin/statistic/available_tasks_report_view";
+import ProjectProgressReportView from "admin/statistic/project_progress_report_view";
+import TaskCreateFormView from "admin/task/task_create_form_view";
+import TaskCreateView from "admin/task/task_create_view";
+import TaskListView from "admin/task/task_list_view";
+import TaskTypeCreateView from "admin/tasktype/task_type_create_view";
+import TaskTypeListView from "admin/tasktype/task_type_list_view";
+import TeamListView from "admin/team/team_list_view";
+import UserListView from "admin/user/user_list_view";
+import { Layout } from "antd";
+import { Imprint, Privacy } from "components/legal";
+import SecuredRoute from "components/secured_route";
+import DashboardView from "dashboard/dashboard_view";
+import PublicationDetailView from "dashboard/publication_details_view";
+import Navbar from "navbar";
+import {
+  Navigate,
+  Outlet,
+  Route,
+  createBrowserRouter,
+  createRoutesFromElements,
+} from "react-router-dom";
+
+import AccountSettingsView from "admin/account/account_settings_view";
+import VerifyEmailView from "admin/auth/verify_email_view";
+import { DatasetURLImport } from "admin/dataset/dataset_url_import";
+import TimeTrackingOverview from "admin/statistic/time_tracking_overview";
+import AiModelListView from "admin/voxelytics/ai_model_list_view";
+import ErrorBoundary from "components/error_boundary";
+import loadable from "libs/lazy_loader";
+import type { EmptyObject } from "types/globals";
+import { CommandPalette } from "viewer/view/components/command_palette";
+
+const { Content } = Layout;
+import AccountAuthTokenView from "admin/account/account_auth_token_view";
+import AccountPasswordView from "admin/account/account_password_view";
+import AccountProfileView from "admin/account/account_profile_view";
+import { OrganizationDangerZoneView } from "admin/organization/organization_danger_zone_view";
+import { OrganizationNotificationsView } from "admin/organization/organization_notifications_view";
+import { OrganizationOverviewView } from "admin/organization/organization_overview_view";
+import { useWkSelector } from "libs/react_hooks";
+import { PageNotFoundView } from "./page_not_found_view";
+import {
+  AnnotationsRouteWrapper,
+  CreateExplorativeRouteWrapper,
+  DashboardRouteRootWrapper,
+  DashboardRouteWrapper,
+  DatasetSettingsRouteWrapper,
+  OnboardingRouteWrapper,
+  RootRouteWrapper,
+  ShortLinksRouteWrapper,
+  TracingSandboxLegacyRouteWrapper,
+  TracingSandboxRouteWrapper,
+  TracingViewModeLegacyWrapper,
+  TracingViewModeRouteWrapper,
+  TracingViewRouteWrapper,
+  UserDetailsRouteWrapper,
+} from "./route_wrappers";
+
+const AsyncWorkflowView = loadable<EmptyObject>(() => import("admin/voxelytics/workflow_view"));
+const AsyncWorkflowListView = loadable<EmptyObject>(
+  () => import("admin/voxelytics/workflow_list_view"),
+);
+
+function RootLayout() {
+  const isAuthenticated = useWkSelector((state) => state.activeUser != null);
+  const isAdminView = useWkSelector((state) => !state.uiInformation.isInAnnotationView);
+
+  return (
+    <Layout>
+      {/* TODO: always show command pallete; remove logic from router
+      within tracing view, the command palette is rendered in the status bar. */}
+      {isAuthenticated && isAdminView && <CommandPalette label={null} />}
+      <Navbar isAuthenticated={isAuthenticated} />
+      <Content>
+        <ErrorBoundary>
+          <Outlet />
+        </ErrorBoundary>
+      </Content>
+    </Layout>
+  );
+}
+
+const routes = createRoutesFromElements(
+  <Route element={<RootLayout />}>
+    <Route path="/" element={<RootRouteWrapper />} />
+    <Route
+      path="/dashboard/:tab"
+      element={
+        <SecuredRoute>
+          <DashboardRouteWrapper />
+        </SecuredRoute>
+      }
+    />
+
+    <Route
+      path="/dashboard/datasets/:folderIdWithName"
+      element={
+        <SecuredRoute>
+          <DashboardView userId={null} isAdminView={false} initialTabKey={"datasets"} />
+        </SecuredRoute>
+      }
+    />
+
+    <Route path="/dashboard" element={<DashboardRouteRootWrapper />} />
+    <Route
+      path="/users/:userId/details"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole>
+          <UserDetailsRouteWrapper />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/users"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole>
+          <UserListView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/import"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole>
+          <DatasetURLImport />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/teams"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole>
+          <TeamListView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/timetracking"
+      element={
+        <SecuredRoute>
+          <TimeTrackingOverview />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/reports/projectProgress"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole requiredPricingPlan={PricingPlanEnum.Team}>
+          <ProjectProgressReportView />
+        </SecuredRoute>
+      }
+    />
+    <Route path="/reports/openTasks" element={<Navigate to="/reports/availableTasks" />} />
+    <Route
+      path="/reports/availableTasks"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole requiredPricingPlan={PricingPlanEnum.Team}>
+          <AvailableTasksReportView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/tasks"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole requiredPricingPlan={PricingPlanEnum.Team}>
+          <TaskListView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/tasks/create"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole requiredPricingPlan={PricingPlanEnum.Team}>
+          <TaskCreateView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/tasks/:taskId/edit"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole requiredPricingPlan={PricingPlanEnum.Team}>
+          <TaskCreateFormView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/tasks/:taskId"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole requiredPricingPlan={PricingPlanEnum.Team}>
+          <TaskListView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/projects"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole requiredPricingPlan={PricingPlanEnum.Team}>
+          <ProjectListView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/projects/create"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole requiredPricingPlan={PricingPlanEnum.Team}>
+          <ProjectCreateView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/projects/:projectId/tasks"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole requiredPricingPlan={PricingPlanEnum.Team}>
+          <TaskListView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/projects/:projectId/edit"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole requiredPricingPlan={PricingPlanEnum.Team}>
+          <ProjectCreateView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/annotations/:type/:id"
+      element={
+        <SecuredRoute checkIfResourceIsPublic>
+          <AnnotationsRouteWrapper />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/annotations/:id"
+      element={
+        <SecuredRoute checkIfResourceIsPublic>
+          <TracingViewRouteWrapper />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/datasets/upload"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole>
+          <DatasetAddView />
+        </SecuredRoute>
+      }
+    />
+
+    <Route
+      path="/datasets/:datasetNameAndId/edit"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole>
+          <DatasetSettingsRouteWrapper />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/taskTypes"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole>
+          <TaskTypeListView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/taskTypes/create"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole requiredPricingPlan={PricingPlanEnum.Team}>
+          <TaskTypeCreateView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/taskTypes/:taskTypeId/edit"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole requiredPricingPlan={PricingPlanEnum.Team}>
+          <TaskTypeCreateView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/taskTypes/:taskTypeId/tasks"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole requiredPricingPlan={PricingPlanEnum.Team}>
+          <TaskListView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/taskTypes/:taskTypeId/projects"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole requiredPricingPlan={PricingPlanEnum.Team}>
+          <ProjectListView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/scripts/create"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole>
+          <ScriptCreateView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/scripts/:scriptId/edit"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole>
+          <ScriptCreateView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/scripts"
+      element={
+        <SecuredRoute requiresAdminOrManagerRole>
+          <ScriptListView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/jobs"
+      element={
+        <SecuredRoute>
+          <JobListView />
+        </SecuredRoute>
+      }
+    />
+    <Route path="/organizations/:organizationId" element={<Navigate to="/organization" />} />
+    <Route
+      path="/organization"
+      element={
+        <SecuredRoute>
+          <OrganizationView />
+        </SecuredRoute>
+      }
+    >
+      <Route index element={<Navigate to="overview" />} />
+      <Route path="overview" element={<OrganizationOverviewView />} />
+      <Route path="notifications" element={<OrganizationNotificationsView />} />
+      <Route path="delete" element={<OrganizationDangerZoneView />} />
+    </Route>
+    <Route
+      path="/help/keyboardshortcuts"
+      element={<Navigate to="https://docs.webknossos.org/webknossos/ui/keyboard_shortcuts.html" />}
+    />
+    {/* Backwards compatibility for old auth token URLs */}
+    <Route path="/auth/token" element={<Navigate to="/account/token" />} />
+    {/* Backwards compatibility for old password change URLs */}
+    <Route path="/auth/changePassword" element={<Navigate to="/account/password" />} />
+    <Route path="/login" element={<Navigate to="/auth/login" />} />
+
+    <Route path="/invite/:token" element={<AcceptInviteView />} />
+
+    <Route path="/verifyEmail/:token" element={<VerifyEmailView />} />
+    {/* Backwards compatibility for signup URLs */}
+    <Route path="/signup" element={<Navigate to="/auth/signup" />} />
+    {/* Backwards compatibility for register URLs */}
+    <Route path="/register" element={<Navigate to="/auth/signup" />} />
+    {/* Backwards compatibility for register URLs */}
+    <Route path="/auth/register" element={<Navigate to="/auth/signup" />} />
+    <Route path="/auth/login" element={<LoginView />} />
+    <Route path="/auth/signup" element={<RegistrationView />} />
+
+    <Route path="/auth/resetPassword" element={<StartResetPasswordView />} />
+    <Route path="/auth/finishResetPassword" element={<FinishResetPasswordView />} />
+    {/* legacy view mode route */}
+    <Route
+      path="/datasets/:organizationId/:datasetName/view"
+      element={<TracingViewModeLegacyWrapper />}
+    />
+    <Route path="/datasets/:datasetNameAndId/view" element={<TracingViewModeRouteWrapper />} />
+    <Route
+      path="/datasets/:datasetNameAndId/sandbox/:type"
+      element={<TracingSandboxRouteWrapper />}
+    />
+    {/* legacy sandbox route */}
+    <Route
+      path="/datasets/:organizationId/:datasetName/sandbox/:type"
+      element={<TracingSandboxLegacyRouteWrapper />}
+    />
+    <Route
+      path="/datasets/:datasetId/createExplorative/:type"
+      element={
+        <SecuredRoute>
+          <CreateExplorativeRouteWrapper />
+        </SecuredRoute>
+      }
+    />
+    {
+      // Note that this route has to be beneath all others sharing the same prefix,
+      // to avoid url mismatching
+    }
+    {/*legacy view mode route */}
+    <Route
+      path="/datasets/:organizationId/:datasetName"
+      element={<TracingViewModeLegacyWrapper />}
+    />
+    <Route path="/datasets/:datasetNameAndId" element={<TracingViewModeRouteWrapper />} />
+    <Route path="/publications/:id" element={<PublicationDetailView />} />
+    <Route path="/publication/:id" element={<Navigate to="/publications/:id" />} />
+    <Route
+      path="/workflows"
+      element={
+        <SecuredRoute>
+          <AsyncWorkflowListView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/aiModels"
+      element={
+        <SecuredRoute>
+          <AiModelListView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/workflows/:workflowName"
+      element={
+        <SecuredRoute>
+          <AsyncWorkflowView />
+        </SecuredRoute>
+      }
+    />
+    <Route path="/imprint" element={<Imprint />} />
+    <Route path="/privacy" element={<Privacy />} />
+    <Route path="/links/:key" element={<ShortLinksRouteWrapper />} />
+    <Route path="/onboarding" element={<OnboardingRouteWrapper />} />
+    <Route
+      path="/account"
+      element={
+        <SecuredRoute>
+          <AccountSettingsView />
+        </SecuredRoute>
+      }
+    >
+      <Route index element={<Navigate to="profile" />} />
+      <Route path="profile" element={<AccountProfileView />} />
+      <Route path="password" element={<AccountPasswordView />} />
+      <Route path="token" element={<AccountAuthTokenView />} />
+    </Route>
+    <Route path="*" element={<PageNotFoundView />} />
+  </Route>,
+);
+
+const router = createBrowserRouter(routes);
+export default router;
diff --git a/frontend/javascripts/viewer/controller.tsx b/frontend/javascripts/viewer/controller.tsx
index 544ee64066a..43638101e5d 100644
--- a/frontend/javascripts/viewer/controller.tsx
+++ b/frontend/javascripts/viewer/controller.tsx
@@ -1,17 +1,17 @@
 import app from "app";
 import BrainSpinner, { BrainSpinnerWithError, CoverWithLogin } from "components/brain_spinner";
-import type { Action as HistoryAction, Location as HistoryLocation } from "history";
 import { fetchGistContent } from "libs/gist";
 import { InputKeyboardNoLoop } from "libs/input";
 import Toast from "libs/toast";
 import * as Utils from "libs/utils";
-import window, { document, location } from "libs/window";
+import window, { document } from "libs/window";
+import { type WithBlockerProps, withBlocker } from "libs/with_blocker_hoc";
+import { type RouteComponentProps, withRouter } from "libs/with_router_hoc";
 import _ from "lodash";
 import messages from "messages";
 import * as React from "react";
 import { connect } from "react-redux";
-import type { RouteComponentProps } from "react-router-dom";
-import { withRouter } from "react-router-dom";
+import type { BlockerFunction } from "react-router-dom";
 import { APIAnnotationTypeEnum, type APICompoundType } from "types/api_types";
 import type { APIOrganization, APIUser } from "types/api_types";
 import ApiLoader from "viewer/api/api_loader";
@@ -43,7 +43,7 @@ type StateProps = {
   user: APIUser | null | undefined;
 };
 type Props = OwnProps & StateProps;
-type PropsWithRouter = Props & RouteComponentProps;
+type PropsWithRouter = Props & RouteComponentProps & WithBlockerProps;
 type State = {
   gotUnhandledError: boolean;
   organizationToSwitchTo: APIOrganization | null | undefined;
@@ -85,6 +85,9 @@ class Controller extends React.PureComponent<PropsWithRouter, State> {
   componentWillUnmount() {
     this._isMounted = false;
     Store.dispatch(setIsInAnnotationViewAction(false));
+    this.props.setBlocking({
+      shouldBlock: false,
+    });
   }
 
   tryFetchingModel() {
@@ -131,40 +134,39 @@ class Controller extends React.PureComponent<PropsWithRouter, State> {
   }
 
   modelFetchDone() {
-    const beforeUnload = (
-      newLocation: HistoryLocation<unknown>,
-      action: HistoryAction,
-    ): string | false | void => {
-      // Only show the prompt if this is a proper beforeUnload event from the browser
-      // or the pathname changed
-      // This check has to be done because history.block triggers this function even if only the url hash changed
-      if (action === undefined || newLocation.pathname !== location.pathname) {
-        const stateSaved = Model.stateSaved();
-
-        if (!stateSaved && Store.getState().annotation.restrictions.allowUpdate) {
+    const beforeUnload = (args: BeforeUnloadEvent | BlockerFunction): boolean => {
+      // Navigation blocking can be triggered by two sources:
+      // 1. The browser's native beforeunload event
+      // 2. The React-Router block function (useBlocker or withBlocker HOC)
+
+      if (!Model.stateSaved() && Store.getState().annotation.restrictions.allowUpdate) {
+        window.onbeforeunload = null; // clear the event handler otherwise it would be called twice. Once from history.block once from the beforeunload event
+
+        setTimeout(() => {
+          if (!this._isMounted) {
+            return false;
+          }
+
+          Store.dispatch(saveNowAction());
+          // restore the event handler in case a user chose to stay on the page
           // @ts-ignore
-          window.onbeforeunload = null; // clear the event handler otherwise it would be called twice. Once from history.block once from the beforeunload event
-
-          setTimeout(() => {
-            if (!this._isMounted) {
-              return;
-            }
-
-            Store.dispatch(saveNowAction());
-            // restore the event handler in case a user chose to stay on the page
-            // @ts-ignore
-            window.onbeforeunload = beforeUnload;
-          }, 500);
-          return messages["save.leave_page_unfinished"];
-        }
+          window.onbeforeunload = beforeUnload;
+        }, 500);
+
+        // The native event requires a truthy return value to show a generic message
+        // The React Router blocker accepts a boolean
+        return "preventDefault" in args ? true : !confirm(messages["save.leave_page_unfinished"]);
       }
 
-      return;
+      return false;
     };
 
-    this.props.history.block(beforeUnload);
-    // @ts-ignore
     window.onbeforeunload = beforeUnload;
+    this.props.setBlocking({
+      // @ts-ignore beforeUnload signature is overloaded
+      shouldBlock: beforeUnload,
+    });
+
     UrlManager.startUrlUpdater();
     initializeSceneController();
     this.initKeyboard();
@@ -356,4 +358,4 @@ function mapStateToProps(state: WebknossosState): StateProps {
 }
 
 const connector = connect(mapStateToProps);
-export default connector(withRouter<PropsWithRouter, any>(Controller));
+export default connector(withBlocker(withRouter<PropsWithRouter>(Controller)));
diff --git a/frontend/javascripts/viewer/view/action_bar_view.tsx b/frontend/javascripts/viewer/view/action_bar_view.tsx
index 110aa47ae26..3688fdc00e9 100644
--- a/frontend/javascripts/viewer/view/action_bar_view.tsx
+++ b/frontend/javascripts/viewer/view/action_bar_view.tsx
@@ -8,7 +8,7 @@ import { isUserAdminOrTeamManager } from "libs/utils";
 import { ArbitraryVectorInput } from "libs/vector_input";
 import * as React from "react";
 import { connect, useDispatch } from "react-redux";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import type { APIDataset, APISegmentationLayer, APIUser } from "types/api_types";
 import { APIJobType, type AdditionalCoordinate } from "types/api_types";
 import { type ControlMode, MappingStatusEnum, type ViewMode } from "viewer/constants";
@@ -139,7 +139,7 @@ function AdditionalCoordinatesInputView() {
 }
 
 function CreateAnnotationButton() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const activeUser = useWkSelector((state) => state.activeUser);
   const visibleSegmentationLayers = useWkSelector((state) => getVisibleSegmentationLayers(state));
   const segmentationLayers = useWkSelector((state) => getSegmentationLayers(state.dataset));
@@ -174,7 +174,7 @@ function CreateAnnotationButton() {
       fallbackLayerName,
       maybeMappingName,
     );
-    history.push(`/annotations/${annotation.id}${location.hash}`);
+    navigate(`/annotations/${annotation.id}${location.hash}`);
   };
 
   const getFallbackLayerName = (segmentationLayer: APISegmentationLayer | null | undefined) => {
diff --git a/frontend/javascripts/viewer/view/layouting/tracing_layout_view.tsx b/frontend/javascripts/viewer/view/layouting/tracing_layout_view.tsx
index dcc517945d3..b62adf4c39d 100644
--- a/frontend/javascripts/viewer/view/layouting/tracing_layout_view.tsx
+++ b/frontend/javascripts/viewer/view/layouting/tracing_layout_view.tsx
@@ -4,11 +4,11 @@ import ErrorHandling from "libs/error_handling";
 import Request from "libs/request";
 import Toast from "libs/toast";
 import { document, location } from "libs/window";
+import { type RouteComponentProps, withRouter } from "libs/with_router_hoc";
 import _ from "lodash";
 import messages from "messages";
 import * as React from "react";
 import { connect } from "react-redux";
-import { type RouteComponentProps, withRouter } from "react-router-dom";
 import type { Dispatch } from "redux";
 import { NavAndStatusBarTheme } from "theme";
 import type { APICompoundType } from "types/api_types";
@@ -65,11 +65,7 @@ type StateProps = ReturnType<typeof mapStateToProps>;
 type DispatchProps = {
   setAutoSaveLayouts: (arg0: boolean) => void;
 };
-type PropsWithRouter = OwnProps &
-  StateProps &
-  DispatchProps & {
-    history: RouteComponentProps["history"];
-  };
+type PropsWithRouter = OwnProps & StateProps & DispatchProps & RouteComponentProps;
 type State = {
   activeLayoutName: string;
   hasError: boolean;
@@ -330,7 +326,7 @@ class TracingLayoutView extends React.PureComponent<PropsWithRouter, State> {
           datasetId: this.props.datasetId,
         },
       });
-      this.props.history.push(`/annotations/${response.annotation.typ}/${response.annotation.id}`);
+      this.props.navigate(`/annotations/${response.annotation.typ}/${response.annotation.id}`);
     };
 
     return (
@@ -451,4 +447,4 @@ function mapStateToProps(state: WebknossosState) {
 }
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
-export default connector(withRouter<RouteComponentProps & OwnProps, any>(TracingLayoutView));
+export default connector(withRouter(TracingLayoutView));
diff --git a/package.json b/package.json
index f05b85c579b..90a2dc38d19 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,6 @@
     "@types/react": "^18.3.1",
     "@types/react-command-palette": "^0.18.4",
     "@types/react-dom": "^18.3.0",
-    "@types/react-router-dom": "^5.3.3",
     "@types/shelljs": "^0.8.5",
     "@types/three": "^0.169.0",
     "@types/url-join": "^4.0.0",
@@ -152,7 +151,6 @@
     "file-saver": "^2.0.1",
     "flexlayout-react": "0.7.15",
     "hammerjs": "^2.0.8",
-    "history": "^4.7.2",
     "html2canvas": "^1.4.1",
     "immutability-helper": "^3.1.1",
     "javascript-natural-sort": "^0.7.1",
@@ -185,7 +183,7 @@
     "react-json-tree": "0.19.0",
     "react-markdown": "^8.0.7",
     "react-redux": "^8.1.0",
-    "react-router-dom": "5.3.4",
+    "react-router-dom": "^6.30.1",
     "react-tooltip": "^5.27.1",
     "react-virtualized-auto-sizer": "^1.0.24",
     "redux": "4.1.2",
@@ -201,5 +199,5 @@
     "url-join": "^4.0.0",
     "worker-loader": "^3.0.8"
   },
-  "packageManager": "yarn@4.4.1"
+  "packageManager": "yarn@4.9.2"
 }
diff --git a/yarn.lock b/yarn.lock
index 66e8b613221..ab97a887617 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -360,7 +360,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.24.8, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.24.8, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.9.2":
   version: 7.25.6
   resolution: "@babel/runtime@npm:7.25.6"
   dependencies:
@@ -2154,6 +2154,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@remix-run/router@npm:1.23.0":
+  version: 1.23.0
+  resolution: "@remix-run/router@npm:1.23.0"
+  checksum: 10c0/eaef5cb46a1e413f7d1019a75990808307e08e53a39d4cf69c339432ddc03143d725decef3d6b9b5071b898da07f72a4a57c4e73f787005fcf10162973d8d7d7
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-android-arm-eabi@npm:4.40.1":
   version: 4.40.1
   resolution: "@rollup/rollup-android-arm-eabi@npm:4.40.1"
@@ -2893,13 +2900,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/history@npm:^4.7.11":
-  version: 4.7.11
-  resolution: "@types/history@npm:4.7.11"
-  checksum: 10c0/3facf37c2493d1f92b2e93a22cac7ea70b06351c2ab9aaceaa3c56aa6099fb63516f6c4ec1616deb5c56b4093c026a043ea2d3373e6c0644d55710364d02c934
-  languageName: node
-  linkType: hard
-
 "@types/hoist-non-react-statics@npm:^3.3.1":
   version: 3.3.5
   resolution: "@types/hoist-non-react-statics@npm:3.3.5"
@@ -3152,27 +3152,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-router-dom@npm:^5.3.3":
-  version: 5.3.3
-  resolution: "@types/react-router-dom@npm:5.3.3"
-  dependencies:
-    "@types/history": "npm:^4.7.11"
-    "@types/react": "npm:*"
-    "@types/react-router": "npm:*"
-  checksum: 10c0/a9231a16afb9ed5142678147eafec9d48582809295754fb60946e29fcd3757a4c7a3180fa94b45763e4c7f6e3f02379e2fcb8dd986db479dcab40eff5fc62a91
-  languageName: node
-  linkType: hard
-
-"@types/react-router@npm:*":
-  version: 5.1.18
-  resolution: "@types/react-router@npm:5.1.18"
-  dependencies:
-    "@types/history": "npm:^4.7.11"
-    "@types/react": "npm:*"
-  checksum: 10c0/cc0c900b6c06597a963cc1bf4b541d51edd59f820741ee754b8539340b2247c391b9ea0c113938a7038680e3b58e9c290f0318657cfd1abe9d5b238b4829f0c2
-  languageName: node
-  linkType: hard
-
 "@types/react@npm:*, @types/react@npm:^18.3.1":
   version: 18.3.5
   resolution: "@types/react@npm:18.3.5"
@@ -7461,21 +7440,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"history@npm:^4.7.2, history@npm:^4.9.0":
-  version: 4.10.1
-  resolution: "history@npm:4.10.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.1.2"
-    loose-envify: "npm:^1.2.0"
-    resolve-pathname: "npm:^3.0.0"
-    tiny-invariant: "npm:^1.0.2"
-    tiny-warning: "npm:^1.0.0"
-    value-equal: "npm:^1.0.1"
-  checksum: 10c0/35377694e4f10f2cf056a9cb1a8ee083e04e4b4717a63baeee4afd565658a62c7e73700bf9e82aa53dbe1ec94e0a25a83c080d63bad8ee6b274a98d2fbc5ed4c
-  languageName: node
-  linkType: hard
-
-"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
+"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -8861,7 +8826,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.2.0, loose-envify@npm:^1.3.1, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -10604,15 +10569,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-to-regexp@npm:^1.7.0":
-  version: 1.8.0
-  resolution: "path-to-regexp@npm:1.8.0"
-  dependencies:
-    isarray: "npm:0.0.1"
-  checksum: 10c0/7b25d6f27a8de03f49406d16195450f5ced694398adea1510b0f949d9660600d1769c5c6c83668583b7e6b503f3caf1ede8ffc08135dbe3e982f034f356fbb5c
-  languageName: node
-  linkType: hard
-
 "path-type@npm:^4.0.0":
   version: 4.0.0
   resolution: "path-type@npm:4.0.0"
@@ -11896,7 +11852,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.1, react-is@npm:^16.6.0, react-is@npm:^16.6.3, react-is@npm:^16.7.0, react-is@npm:^16.8.6":
+"react-is@npm:^16.13.1, react-is@npm:^16.6.3, react-is@npm:^16.7.0, react-is@npm:^16.8.6":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: 10c0/33977da7a5f1a287936a0c85639fec6ca74f4f15ef1e59a6bc20338fc73dc69555381e211f7a3529b8150a1f71e4225525b41b60b52965bda53ce7d47377ada1
@@ -12020,39 +11976,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:5.3.4":
-  version: 5.3.4
-  resolution: "react-router-dom@npm:5.3.4"
+"react-router-dom@npm:^6.30.1":
+  version: 6.30.1
+  resolution: "react-router-dom@npm:6.30.1"
   dependencies:
-    "@babel/runtime": "npm:^7.12.13"
-    history: "npm:^4.9.0"
-    loose-envify: "npm:^1.3.1"
-    prop-types: "npm:^15.6.2"
-    react-router: "npm:5.3.4"
-    tiny-invariant: "npm:^1.0.2"
-    tiny-warning: "npm:^1.0.0"
+    "@remix-run/router": "npm:1.23.0"
+    react-router: "npm:6.30.1"
   peerDependencies:
-    react: ">=15"
-  checksum: 10c0/f04f727e2ed2e9d1d3830af02cc61690ff67b1524c0d18690582bfba0f4d14142ccc88fb6da6befad644fddf086f5ae4c2eb7048c67da8a0b0929c19426421b0
+    react: ">=16.8"
+    react-dom: ">=16.8"
+  checksum: 10c0/e9e1297236b0faa864424ad7d51c392fc6e118595d4dad4cd542fd217c479a81601a81c6266d5801f04f9e154de02d3b094fc22ccb544e755c2eb448fab4ec6b
   languageName: node
   linkType: hard
 
-"react-router@npm:5.3.4":
-  version: 5.3.4
-  resolution: "react-router@npm:5.3.4"
+"react-router@npm:6.30.1":
+  version: 6.30.1
+  resolution: "react-router@npm:6.30.1"
   dependencies:
-    "@babel/runtime": "npm:^7.12.13"
-    history: "npm:^4.9.0"
-    hoist-non-react-statics: "npm:^3.1.0"
-    loose-envify: "npm:^1.3.1"
-    path-to-regexp: "npm:^1.7.0"
-    prop-types: "npm:^15.6.2"
-    react-is: "npm:^16.6.0"
-    tiny-invariant: "npm:^1.0.2"
-    tiny-warning: "npm:^1.0.0"
+    "@remix-run/router": "npm:1.23.0"
   peerDependencies:
-    react: ">=15"
-  checksum: 10c0/e15c00dfef199249b4c6e6d98e5e76cc352ce66f3270f13df37cc069ddf7c05e43281e8c308fc407e4435d72924373baef1d2890e0f6b0b1eb423cf47315a053
+    react: ">=16.8"
+  checksum: 10c0/0414326f2d8e0c107fb4603cf4066dacba6a1f6f025c6e273f003e177b2f18888aca3de06d9b5522908f0e41de93be1754c37e82aa97b3a269c4742c08e82539
   languageName: node
   linkType: hard
 
@@ -12490,13 +12434,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve-pathname@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "resolve-pathname@npm:3.0.0"
-  checksum: 10c0/c6ec49b670dc35b9a303c47fa83ba9348a71e92d64a4c4bb85e1b659a29b407aa1ac1cb14a9b5b502982132ca77482bd80534bca147439d66880d35a137fe723
-  languageName: node
-  linkType: hard
-
 "resolve-pkg-maps@npm:^1.0.0":
   version: 1.0.0
   resolution: "resolve-pkg-maps@npm:1.0.0"
@@ -13758,20 +13695,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tiny-invariant@npm:^1.0.2":
-  version: 1.1.0
-  resolution: "tiny-invariant@npm:1.1.0"
-  checksum: 10c0/4587d58a2330d5904829277e8cec0b86d6c56b649f6ce9fedc39e8717a3af159b35e80a133794c40a86d70daf2613eed4454f1415cf070fed693c1c684c0c1ef
-  languageName: node
-  linkType: hard
-
-"tiny-warning@npm:^1.0.0":
-  version: 1.0.3
-  resolution: "tiny-warning@npm:1.0.3"
-  checksum: 10c0/ef8531f581b30342f29670cb41ca248001c6fd7975ce22122bd59b8d62b4fc84ad4207ee7faa95cde982fa3357cd8f4be650142abc22805538c3b1392d7084fa
-  languageName: node
-  linkType: hard
-
 "tinybench@npm:^2.9.0":
   version: 2.9.0
   resolution: "tinybench@npm:2.9.0"
@@ -14200,11 +14123,11 @@ __metadata:
 
 "typescript@patch:typescript@npm%3A^5.8.0#optional!builtin<compat/typescript>":
   version: 5.8.3
-  resolution: "typescript@patch:typescript@npm%3A5.8.3#optional!builtin<compat/typescript>::version=5.8.3&hash=8c6c40"
+  resolution: "typescript@patch:typescript@npm%3A5.8.3#optional!builtin<compat/typescript>::version=5.8.3&hash=5786d5"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/92ea03509e06598948559ddcdd8a4ae5a7ab475766d5589f1b796f5731b3d631a4c7ddfb86a3bd44d58d10102b132cd4b4994dda9b63e6273c66d77d6a271dbd
+  checksum: 10c0/39117e346ff8ebd87ae1510b3a77d5d92dae5a89bde588c747d25da5c146603a99c8ee588c7ef80faaf123d89ed46f6dbd918d534d641083177d5fac38b8a1cb
   languageName: node
   linkType: hard
 
@@ -14540,13 +14463,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"value-equal@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "value-equal@npm:1.0.1"
-  checksum: 10c0/79068098355483ef29f4d3753999ad880875b87625d7e9055cad9346ea4b7662aad3a66f87976801b0dd7a6f828ba973d28b1669ebcd37eaf88cc5f687c1a691
-  languageName: node
-  linkType: hard
-
 "vary@npm:~1.1.2":
   version: 1.1.2
   resolution: "vary@npm:1.1.2"
@@ -14893,7 +14809,6 @@ __metadata:
     "@types/react": "npm:^18.3.1"
     "@types/react-command-palette": "npm:^0.18.4"
     "@types/react-dom": "npm:^18.3.0"
-    "@types/react-router-dom": "npm:^5.3.3"
     "@types/shelljs": "npm:^0.8.5"
     "@types/three": "npm:^0.169.0"
     "@types/url-join": "npm:^4.0.0"
@@ -14929,7 +14844,6 @@ __metadata:
     file-saver: "npm:^2.0.1"
     flexlayout-react: "npm:0.7.15"
     hammerjs: "npm:^2.0.8"
-    history: "npm:^4.7.2"
     html2canvas: "npm:^1.4.1"
     husky: "npm:^9.1.5"
     immutability-helper: "npm:^3.1.1"
@@ -14975,7 +14889,7 @@ __metadata:
     react-json-tree: "npm:0.19.0"
     react-markdown: "npm:^8.0.7"
     react-redux: "npm:^8.1.0"
-    react-router-dom: "npm:5.3.4"
+    react-router-dom: "npm:^6.30.1"
     react-tooltip: "npm:^5.27.1"
     react-virtualized-auto-sizer: "npm:^1.0.24"
     redux: "npm:4.1.2"