new packages

package.json

@@ -10,9 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/react-router-dom": "^5.3.3",
     "axios": "^1.7.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

src/App.tsx

@@ -1,8 +1,17 @@
-import { useLayoutEffect, useState } from 'react'
+import { useState } from 'react'
+import axios from 'axios'
 import './App.css'
+const [token, setToken] = useState("")
+
+const API = axios.create({
+  baseURL: "http://localhost:3000/",
+  headers: {
+    "Content-Type": "application/json; charset=UTF-8",
+    "Authorization": "secret_token " + token
+  }
+})
 
 function App() {
-  const [token, setToken] = useState("")
   return (
     <>
 

src/error-page.tsx

@@ -0,0 +1,16 @@
+import { useRouteError } from "react-router-dom";
+
+export default function ErrorPage() {
+  const error: any = useRouteError();
+  console.error(error);
+
+  return (
+    <div id="error-page">
+      <h1>Oops!</h1>
+      <p>Sorry, an unexpected error has occurred.</p>
+      <p>
+        <i>{error.statusText || error.message}</i>
+      </p>
+    </div>
+  );
+}

src/main.tsx

@@ -1,7 +1,19 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import App from './App.tsx'
 import './index.css'
+import Root from './routes/root.tsx'
+import ErrorPage from './error-page.tsx'
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: < Root />,
+    errorElement: <ErrorPage />
+  },
+]);
+
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

src/routes/root.tsx

@@ -0,0 +1,5 @@
+export default function Root() {
+  return <>
+    <h1>Hello!</h1>
+  </>
+}