1. base url

src/pages/Home.jsx

@@ -1,7 +1,9 @@
+import { Link } from 'react-router-dom'
+
 export const Home = () => {
   return (
     <div className="home p-2">
-      <a href="/chat">Chat</a>
+      <Link to="/chat">Chat</Link>
     </div>
   )
 }

src/pages/chat/MessageDisplay.jsx

@@ -1,9 +1,10 @@
+import { appendBase } from '@/utils/main'
 import { server } from './db/server'
 import Markdown from 'react-markdown'
 
 export const MessageDisplay = ({ message }) => {
   const { message: content, type } = message
-  const [avatar, setAvatar] = useState('/img/avatar-0.jpg')
+  const [avatar, setAvatar] = useState(appendBase('/img/avatar-0.jpg'))
 
   useEffect(() => {
     server.getAvatar(message.fromId).then(setAvatar)

src/router/main.jsx

@@ -3,11 +3,16 @@ import { chatRoute } from '../pages/chat/route'
 import { ErrorPage } from '../pages/ErrorPage'
 import { Home } from '@/pages/Home'
 
-export const router = createBrowserRouter([
+export const router = createBrowserRouter(
+  [
+    {
+      path: '/',
+      element: <Home />,
+      errorElement: <ErrorPage />,
+    },
+    chatRoute,
+  ],
   {
-    path: '/',
-    element: <Home />,
-    errorElement: <ErrorPage />,
-  },
-  chatRoute,
-])
+    basename: '/xiazhi-react',
+  }
+)

src/utils/main.jsx

@@ -85,3 +85,7 @@ export const localGet = (k) => {
 export const localDel = (k) => {
   localStorage.removeItem(k)
 }
+
+export const appendBase = (p) => {
+  return import.meta.env.BASE_URL + p
+}