Fix Routing behavior

Author: Alexandra Zwinger

src/AxiosConfig.tsx

@@ -9,11 +9,26 @@ const axiosInstance = axios.create({
     withCredentials: true,
 });
 
+let isInitialized = false;
+
+keycloak.onReady = () => {
+    isInitialized = true;
+};
+
 axiosInstance.interceptors.request.use(
     async (config) => {
-        const token = keycloak.token;
-        if (token) {
-            config.headers['Authorization'] = `Bearer ${token}`;
+        if (!keycloak.token) {
+            await new Promise<void>((resolve) => {
+                const interval = setInterval(() => {
+                    if (keycloak.token) {
+                        clearInterval(interval);
+                        resolve();
+                    }
+                }, 100);
+            });
+        }
+        if (keycloak.token) {
+            config.headers['Authorization'] = `Bearer ${keycloak.token}`;
         }
         return config;
     },

src/index.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import { HashRouter } from 'react-router-dom';
+import {BrowserRouter} from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const queryClient = new QueryClient();
@@ -14,9 +14,9 @@ const root = ReactDOM.createRoot(
 
 root.render(
     <QueryClientProvider client={queryClient}>  {}
-        <HashRouter>
+        <BrowserRouter>
             <App />
-        </HashRouter>
+        </BrowserRouter>
     </QueryClientProvider>
 );