Update React Router to v6 (#8739)

This PR updates React Router (RR) from v5 to v6 following their [upgrade
guide](https://reactrouter.com/6.30.1/upgrading/v5). There is already
react-router v7 but let's go step by step. v7 also seems to have the
same API as v6 so we might update soon in a follow up PR (and double
check compatibility with React v18/19).

Noteworthy changes and high level concepts:
- RR v6 offer various ways of setting up a router
([Docs](https://reactrouter.com/6.30.1/routers/picking-a-router)):
  - Declarative: Using JSX `<Route`> elements like we did so far
- Data API: Create routes as TS code. This is the recommend method and
what I used for the refactor.
- Ideally the routes are constant and live outside a react component to
avoid constant recreation of the router/routes
- While you are meant to define routes as code, there is a
"bridge"/helper, [`createRoutesFromElements`](
https://reactrouter.com/6.30.1/utils/create-routes-from-elements), that
translates JSX `<Route>` objects into code. I used that to keep the diff
and changes somewhat manageable. We can switch to a purely code based
definition in the future.
- File-Base/Framework: You can define routes through your hierarchy on
the file system. (not used)
- RR v6 `<Routes>` do not have a `render={() => ...}` prop anymore that
would run any function. That makes it impossible to do any sort of
conditional logic inside the router. I moved all these methods into new
React wrapper components.
- RR v6 uses new hooks: `useNavigation`, `useParams`(for accessing route
parameters, e.g. `/tasks/:taskId`)
- RR v6 allows [nested
routing](https://reactrouter.com/6.30.1/start/overview#nested-routes). A
common parent page (with nice layout) can be used to render/insert the
child views with an `<Outlet />` component. I used it for the orga &
account pages for rendering the various tabs into a comment parent.
Also, the router's root element uses an `<Outlet>`.
- RR v6 does not support class-based React component anymore. The
`withRouter` HOC was removed. I build a new `withRouter` HOC as a
workaround for our remaining React class components.
- RR v6 removed an imperative API for blocking the navigation from one
page to another. It was replace with a hook
[`useBlocker`](https://reactrouter.com/6.30.1/hooks/use-blocker).
Unfortunately, we mostly use the blocker in class based components.
There is not easy workaround - so I had to remove some of the blocking
stuff. (Dataset Setting are currently being refactored as functional
components and will be able to use that once more. #8732 )


### URL of deployed dev instance (used for testing):
- https://___.webknossos.xyz

### Steps to test:
My testing process:
- Click through all the routes/views and make sure they still work
- Make sure that routes with parameters still work, e.g. all the task,
projects, task types stuff with ids and prefilled forms
- Test a legacy route

### TODOs:
- [x] Fix: navigation blockers
- [ ] Decide: Should we rename the `SecuredRoute` component? It is not a
`<Route>` any more... maybe `AuthRequired` or `RequireAuth` or
something.
- [x] Fix: `features` type definition. It needs too load earlier.
- [x] Fix: dashboard header having too many items <img width="1650"
alt="Screenshot 2025-07-03 at 09 37 11"
src="https://github.com/user-attachments/assets/9bba76e3-2b3a-4bad-8be0-798685d0e4ac"
/>


### Issues:
- fixes #

------
(Please delete unneeded items, merge only when none are left open)
- [x] Added changelog entry (create a `$PR_NUMBER.md` file in
`unreleased_changes` or use `./tools/create-changelog-entry.py`)
- [ ] Added migration guide entry if applicable (edit the same file as
for the changelog)
- [ ] Updated [documentation](../blob/master/docs) if applicable
- [ ] Adapted [wk-libs python
client](https://github.com/scalableminds/webknossos-libs/tree/master/webknossos/webknossos/client)
if relevant API parts change
- [ ] Removed dev-only changes like prints and application.conf edits
- [ ] Considered [common edge
cases](../blob/master/.github/common_edge_cases.md)
- [ ] Needs datastore update after deployment

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Michael Büßemeyer <39529669+MichaelBuessemeyer@users.noreply.github.com>

Author: 3 people

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);

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>
   );

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.

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");
     });
   }
 

frontend/javascripts/admin/auth/login_view.tsx

@@ -1,22 +1,30 @@
 import { Card, Col, Row } from "antd";
+import { useWkSelector } from "libs/react_hooks";
 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 = {
   redirect?: string;
 };
 
 function LoginView({ redirect }: Props) {
-  const history = useHistory();
+  const navigate = useNavigate();
+  const isAuthenticated = useWkSelector((state) => state.activeUser != null);
+
+  if (isAuthenticated) {
+    // If you're already logged in, redirect to the dashboard
+    navigate("/");
+  }
+
   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

frontend/javascripts/admin/auth/registration_view.tsx

@@ -3,14 +3,15 @@ import RegistrationFormWKOrg from "admin/auth/registration_form_wkorg";
 import { getDefaultOrganization } from "admin/rest_api";
 import { Card, Col, Row, Spin } from "antd";
 import features from "features";
+import { useWkSelector } from "libs/react_hooks";
 import Toast from "libs/toast";
 import messages from "messages";
 import { useEffect, useState } from "react";
-import { Link, useHistory } from "react-router-dom";
+import { Link, Navigate, 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 +56,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,15 +96,15 @@ function RegistrationViewGeneric() {
 }
 
 function RegistrationViewWkOrg() {
-  const history = useHistory();
+  const navigate = useNavigate();
   return (
     <Row justify="center" align="middle" className="login-view">
       <Col>
         <Card className="login-content drawing-signup" style={{ maxWidth: 1000 }}>
           <h3>Sign Up</h3>
           <RegistrationFormWKOrg
             onRegistered={() => {
-              history.push("/dashboard");
+              navigate("/dashboard");
             }}
           />
           <p
@@ -120,6 +121,12 @@ function RegistrationViewWkOrg() {
 }
 
 function RegistrationView() {
+  // If you're already logged in, redirect to the dashboard
+  const isAuthenticated = useWkSelector((state) => state.activeUser != null);
+
+  if (isAuthenticated) {
+    return <Navigate to="/" />;
+  }
   return features().isWkorgInstance ? <RegistrationViewWkOrg /> : <RegistrationViewGeneric />;
 }
 

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("/");
     });
   };
 

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 (

frontend/javascripts/admin/dataset/dataset_add_remote_view.tsx

@@ -25,20 +25,19 @@ 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";
 import * as Utils from "libs/utils";
 import _ from "lodash";
 import messages from "messages";
 import React, { useEffect, useState } from "react";
-import { useHistory } from "react-router-dom";
+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 { useWkSelector } from "libs/react_hooks";
 import { Hint } from "viewer/view/action-bar/download_modal_view";
 import { dataPrivacyInfo } from "./dataset_upload_view";
 
@@ -189,7 +188,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);
@@ -210,7 +209,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"])}`,
     );
   };