Remove compatability package and bump react-router to v6

All uses of `useHistory` had to be replaced with `useNavigate`.

app/Root.tsx

@@ -1,7 +1,6 @@
 import { HelmetProvider } from 'react-helmet-async';
 import { Provider } from 'react-redux';
-import { Router } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
+import { BrowserRouter } from 'react-router-dom';
 import ErrorBoundary from 'app/components/ErrorBoundary';
 import { ThemeContextListener } from 'app/utils/themeUtils';
 import RouteConfig from './routes';
@@ -16,11 +15,9 @@ const Root = ({ store }: Props) => (
     <Provider store={store}>
       <ThemeContextListener />
       <ErrorBoundary openReportDialog>
-        <Router>
-          <CompatRouter>
-            <RouteConfig />
-          </CompatRouter>
-        </Router>
+        <BrowserRouter>
+          <RouteConfig />
+        </BrowserRouter>
       </ErrorBoundary>
     </Provider>
   </HelmetProvider>

app/components/Header/Navbar/Navbar.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { NavLink } from 'react-router-dom-v5-compat';
+import { NavLink } from 'react-router-dom';
 import Dropdown from 'app/components/Dropdown';
 import { selectIsLoggedIn } from 'app/reducers/auth';
 import { useAppSelector } from 'app/store/hooks';

app/components/Header/index.tsx

@@ -4,7 +4,7 @@ import cx from 'classnames';
 import moment from 'moment-timezone';
 import { useEffect, useState } from 'react';
 import { Modal } from 'react-overlays';
-import { Link, NavLink, useHistory } from 'react-router-dom';
+import { Link, NavLink, useNavigate } from 'react-router-dom';
 import {
   fetchAll as fetchMeetings,
   getEndpoint,
@@ -85,7 +85,7 @@ const AccountDropdownItems = ({ onClose }: AccountDropdownItemsProps) => {
 
 const UpcomingMeetingButton = () => {
   const upcomingMeetingId = useAppSelector(selectUpcomingMeetingId);
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const pagination = useAppSelector((state) => state.meetings.pagination);
   const queryString = createQueryString({
@@ -112,7 +112,7 @@ const UpcomingMeetingButton = () => {
     <button
       type="button"
       onClick={() => {
-        history.push(`/meetings/${upcomingMeetingId}`);
+        navigate(`/meetings/${upcomingMeetingId}`);
       }}
     >
       <Icon name="people" />

app/components/NavigationTab/NavigationLink.tsx

@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import { NavLink } from 'react-router-dom-v5-compat';
+import { NavLink } from 'react-router-dom';
 import styles from './NavigationLink.css';
 import type { ReactNode } from 'react';
 

app/components/Search/SearchPage.tsx

@@ -1,6 +1,6 @@
 import qs from 'qs';
 import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom-v5-compat';
+import { useLocation } from 'react-router-dom';
 import SearchPageInput from 'app/components/Search/SearchPageInput';
 import SearchPageResults from 'app/components/Search/SearchPageResults';
 import { Keyboard } from 'app/utils/constants';

app/components/UserValidator/index.tsx

@@ -2,8 +2,7 @@ import { Button, Flex, Icon, Modal } from '@webkom/lego-bricks';
 import { get, debounce } from 'lodash';
 import { useCallback, useRef, useState, type ComponentProps } from 'react';
 import { QrReader } from 'react-qr-reader';
-import { useParams } from 'react-router-dom';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate, useParams } from 'react-router-dom';
 import { autocomplete } from 'app/actions/SearchActions';
 import { addToast } from 'app/actions/ToastActions';
 import goodSound from 'app/assets/good-sound.mp3';

app/routes/admin/email/components/EmailListEditor.tsx

@@ -1,6 +1,6 @@
 import { usePreparedEffect } from '@webkom/react-prepare';
 import { Field } from 'react-final-form';
-import { useNavigate, useParams } from 'react-router-dom-v5-compat';
+import { useNavigate, useParams } from 'react-router-dom';
 import {
   createEmailList,
   editEmailList,

app/routes/admin/email/components/EmailUserEditor.tsx

@@ -1,7 +1,7 @@
 import { usePreparedEffect } from '@webkom/react-prepare';
 import { get } from 'lodash';
 import { Field } from 'react-final-form';
-import { useNavigate, useParams } from 'react-router-dom-v5-compat';
+import { useNavigate, useParams } from 'react-router-dom';
 import {
   createEmailUser,
   editEmailUser,

app/routes/admin/email/components/RestrictedMailEditor.tsx

@@ -1,7 +1,7 @@
 import { Button, Icon } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
 import { Field } from 'react-final-form';
-import { useNavigate, useParams } from 'react-router-dom-v5-compat';
+import { useNavigate, useParams } from 'react-router-dom';
 import {
   createRestrictedMail,
   fetchRestrictedMail,

app/routes/admin/email/components/RestrictedMails.tsx

@@ -1,7 +1,7 @@
 import { Button, Flex } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
 import moment from 'moment';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router-dom';
 import { fetch } from 'app/actions/RestrictedMailActions';
 import Table from 'app/components/Table';
 import Tag from 'app/components/Tags/Tag';

app/routes/admin/email/index.tsx

@@ -1,5 +1,5 @@
 import { Helmet } from 'react-helmet-async';
-import { Route, Routes } from 'react-router-dom-v5-compat';
+import { Route, Routes } from 'react-router-dom';
 import { Content } from 'app/components/Content';
 import NavigationTab from 'app/components/NavigationTab';
 import NavigationLink from 'app/components/NavigationTab/NavigationLink';

app/routes/admin/groups/components/GroupForm/index.tsx

@@ -1,5 +1,5 @@
 import { Field } from 'react-final-form';
-import { useParams } from 'react-router-dom-v5-compat';
+import { useNavigate, useParams } from 'react-router-dom';
 import { createGroup, editGroup } from 'app/actions/GroupActions';
 import {
   Form,

app/routes/admin/groups/components/GroupMembers.tsx

@@ -1,6 +1,6 @@
 import { LoadingIndicator } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
-import { useParams } from 'react-router-dom-v5-compat';
+import { useParams } from 'react-router-dom';
 import { fetchMembershipsPagination } from 'app/actions/GroupActions';
 import { selectMembershipsForGroup } from 'app/reducers/memberships';
 import { selectPaginationNext } from 'app/reducers/selectors';

app/routes/admin/groups/components/GroupPage.tsx

@@ -1,11 +1,6 @@
 import { usePreparedEffect } from '@webkom/react-prepare';
 import { Helmet } from 'react-helmet-async';
-import {
-  Route,
-  Routes,
-  useLocation,
-  useParams,
-} from 'react-router-dom-v5-compat';
+import { Route, Routes, useLocation, useParams } from 'react-router-dom';
 import { fetchAll, fetchGroup } from 'app/actions/GroupActions';
 import { Content } from 'app/components/Content';
 import NavigationTab from 'app/components/NavigationTab';

app/routes/admin/index.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes } from 'react-router-dom-v5-compat';
+import { Route, Routes } from 'react-router-dom';
 import PageNotFound from '../pageNotFound';
 import EmailRoute from './email';
 import GroupPage from './groups/components/GroupPage';

app/routes/announcements/index.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes } from 'react-router-dom-v5-compat';
+import { Route, Routes } from 'react-router-dom';
 import PageNotFound from '../pageNotFound';
 import AnnouncementsList from './components/AnnouncementsList';
 

app/routes/articles/components/ArticleDetail.tsx

@@ -2,7 +2,7 @@ import { LoadingIndicator } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
 import moment from 'moment-timezone';
 import { useEffect } from 'react';
-import { useNavigate, useParams, Link } from 'react-router-dom-v5-compat';
+import { useNavigate, useParams, Link } from 'react-router-dom';
 import { fetchArticle } from 'app/actions/ArticleActions';
 import CommentView from 'app/components/Comments/CommentView';
 import { Content } from 'app/components/Content';

app/routes/articles/components/ArticleEditor.tsx

@@ -8,7 +8,7 @@ import {
 import { usePreparedEffect } from '@webkom/react-prepare';
 import { Field } from 'react-final-form';
 import { Helmet } from 'react-helmet-async';
-import { useNavigate, useParams } from 'react-router-dom-v5-compat';
+import { useNavigate, useParams } from 'react-router-dom';
 import {
   createArticle,
   deleteArticle,

app/routes/articles/components/Overview.tsx

@@ -1,7 +1,7 @@
 import qs from 'qs';
 import { useEffect } from 'react';
 import { Helmet } from 'react-helmet-async';
-import { useLocation, Link } from 'react-router-dom-v5-compat';
+import { useLocation, Link } from 'react-router-dom';
 import { fetchAll } from 'app/actions/ArticleActions';
 import { fetchPopular } from 'app/actions/TagActions';
 import { Content } from 'app/components/Content';

app/routes/articles/index.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes } from 'react-router-dom-v5-compat';
+import { Route, Routes } from 'react-router-dom';
 import Overview from 'app/routes/articles/components/Overview';
 import PageNotFound from '../pageNotFound';
 import ArticleDetail from './components/ArticleDetail';

app/routes/bdb/components/AddSemester.tsx

@@ -4,7 +4,7 @@ import { isEmpty } from 'lodash';
 import moment from 'moment-timezone';
 import { useState } from 'react';
 import { Field } from 'react-final-form';
-import { useNavigate, useParams } from 'react-router-dom-v5-compat';
+import { useNavigate, useParams } from 'react-router-dom';
 import {
   addSemester,
   addSemesterStatus,

app/routes/bdb/components/BdbDetail.tsx

@@ -9,7 +9,7 @@ import {
 import { usePreparedEffect } from '@webkom/react-prepare';
 import cx from 'classnames';
 import { useState } from 'react';
-import { Link, useNavigate, useParams } from 'react-router-dom-v5-compat';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import {
   deleteCompanyContact,
   editSemesterStatus,
@@ -31,11 +31,9 @@ import {
 } from 'app/reducers/companies';
 import { selectCompanySemesters } from 'app/reducers/companySemesters';
 import { selectPagination } from 'app/reducers/selectors';
-import { useUserContext } from 'app/routes/app/AppRoute';
 import { EVENT_CONSTANTS } from 'app/routes/events/utils';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import createQueryString from 'app/utils/createQueryString';
-import { guardLogin } from 'app/utils/replaceUnlessLoggedIn';
 import truncateString from 'app/utils/truncateString';
 import {
   sortByYearThenSemester,

app/routes/bdb/components/BdbPage.tsx

@@ -3,7 +3,7 @@ import { usePreparedEffect } from '@webkom/react-prepare';
 import qs from 'qs';
 import { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
-import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { useLocation, useNavigate } from 'react-router-dom';
 import {
   fetchAllAdmin,
   addSemesterStatus,

app/routes/bdb/components/CompanyContactEditor.tsx

@@ -1,6 +1,6 @@
 import { usePreparedEffect } from '@webkom/react-prepare';
 import { Field } from 'react-final-form';
-import { Link, useNavigate, useParams } from 'react-router-dom-v5-compat';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import {
   addCompanyContact,
   editCompanyContact,

app/routes/bdb/components/CompanyEditor.tsx

@@ -1,7 +1,7 @@
 import { LoadingIndicator } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
 import { Field } from 'react-final-form';
-import { useNavigate, useParams } from 'react-router-dom-v5-compat';
+import { useNavigate, useParams } from 'react-router-dom';
 import {
   addCompany,
   editCompany,

app/routes/bdb/index.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes } from 'react-router-dom-v5-compat';
+import { Route, Routes } from 'react-router-dom';
 import PageNotFound from '../pageNotFound';
 import AddSemester from './components/AddSemester';
 import BdbDetail from './components/BdbDetail';

app/routes/brand/index.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes } from 'react-router-dom-v5-compat';
+import { Route, Routes } from 'react-router-dom';
 import PageNotFound from '../pageNotFound';
 import BrandPage from './components/BrandPage';
 

app/routes/company/components/CompaniesPage.tsx

@@ -10,7 +10,7 @@ import cx from 'classnames';
 import { useState, useRef } from 'react';
 import { Helmet } from 'react-helmet-async';
 import InfiniteScroll from 'react-infinite-scroller';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router-dom';
 import { fetchAll } from 'app/actions/CompanyActions';
 import { Image } from 'app/components/Image';
 import { selectActiveCompanies } from 'app/reducers/companies';

app/routes/company/components/CompanyDetail.tsx

@@ -3,7 +3,7 @@ import { usePreparedEffect } from '@webkom/react-prepare';
 import moment from 'moment-timezone';
 import { useState } from 'react';
 import { Helmet } from 'react-helmet-async';
-import { useParams } from 'react-router-dom-v5-compat';
+import { useParams } from 'react-router-dom';
 import {
   fetch,
   fetchEventsForCompany,

app/routes/company/index.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes } from 'react-router-dom-v5-compat';
+import { Route, Routes } from 'react-router-dom';
 import PageNotFound from '../pageNotFound';
 import CompaniesPage from './components/CompaniesPage';
 import CompanyDetail from './components/CompanyDetail';

app/routes/companyInterest/components/CompanyInterestList.tsx

@@ -2,7 +2,7 @@ import { Button, ConfirmModal, Flex, Icon } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
 import qs from 'qs';
 import { useEffect, useMemo, useState } from 'react';
-import { useLocation, Link, useNavigate } from 'react-router-dom-v5-compat';
+import { useLocation, Link, useNavigate } from 'react-router-dom';
 import Select from 'react-select';
 import { fetchSemesters } from 'app/actions/CompanyActions';
 import {

app/routes/companyInterest/components/CompanyInterestPage.tsx

@@ -4,7 +4,7 @@ import arrayMutators from 'final-form-arrays';
 import { Field, FormSpy } from 'react-final-form';
 import { FieldArray } from 'react-final-form-arrays';
 import { Helmet } from 'react-helmet-async';
-import { Link, useLocation, useNavigate, useParams } from 'react-router-dom-v5-compat';
+import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import {
   fetchSemesters,
   fetchSemestersForInterestform,

app/routes/companyInterest/index.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes } from 'react-router-dom-v5-compat';
+import { Route, Routes } from 'react-router-dom';
 import PageNotFound from 'app/routes/pageNotFound';
 import CompanyInterestList from './components/CompanyInterestList';
 import CompanyInterestPage from './components/CompanyInterestPage';

app/routes/contact/components/ContactForm.tsx

@@ -2,7 +2,7 @@ import { Button, Card, LoadingIndicator } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
 import { isEmpty } from 'lodash';
 import { Field } from 'react-final-form';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router-dom';
 import { sendContactMessage } from 'app/actions/ContactActions';
 import { fetchAllWithType, fetchGroup } from 'app/actions/GroupActions';
 import { addToast } from 'app/actions/ToastActions';

app/routes/contact/index.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes } from 'react-router-dom-v5-compat';
+import { Route, Routes } from 'react-router-dom';
 import PageNotFound from 'app/routes/pageNotFound';
 import Contact from './components/Contact';
 

app/routes/events/components/Admin.tsx

@@ -1,8 +1,7 @@
 import { Button, ConfirmModal, Flex, Icon } from '@webkom/lego-bricks';
 import moment from 'moment-timezone';
 import { useState } from 'react';
-import { Link } from 'react-router-dom';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { Link, useNavigate } from 'react-router-dom';
 import { deleteEvent } from 'app/actions/EventActions';
 import AnnouncementInLine from 'app/components/AnnouncementInLine';
 import { useAppDispatch } from 'app/store/hooks';

app/routes/events/components/Analytics.tsx

@@ -1,7 +1,7 @@
 import { Flex } from '@webkom/lego-bricks';
 import moment from 'moment-timezone';
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom-v5-compat';
+import { useParams } from 'react-router-dom';
 import {
   Area,
   AreaChart,

app/routes/events/components/Calendar.tsx

@@ -2,7 +2,7 @@ import { Icon } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
 import moment, { type Moment } from 'moment-timezone';
 import { Helmet } from 'react-helmet-async';
-import { useParams } from 'react-router-dom-v5-compat';
+import { useParams } from 'react-router-dom';
 import { fetchData } from 'app/actions/EventActions';
 import { useUserContext } from 'app/routes/app/AppRoute';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';

app/routes/events/components/EventAdministrate/Abacard.tsx

@@ -1,7 +1,7 @@
 import { usePreparedEffect } from '@webkom/react-prepare';
 import { get } from 'lodash';
 import qs from 'qs';
-import { useLocation, useParams } from 'react-router-dom-v5-compat';
+import { useLocation, useParams } from 'react-router-dom';
 import { markUsernamePresent } from 'app/actions/EventActions';
 import { autocomplete } from 'app/actions/SearchActions';
 import Validator from 'app/components/UserValidator';