调整route写法

src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router';
-import { NavBar, SafeArea, TabBar } from 'antd-mobile';
+import { SafeArea, TabBar } from 'antd-mobile';
 
 import icon_1_s from './assets/tabIcon/icon_tab1_s.svg';
 import icon_1_u from './assets/tabIcon/icon_tab1_u.svg';
@@ -52,7 +52,7 @@ const BottomBar = () => {
         <TabBar.Item
           key={item.key}
           icon={(active: boolean) =>
-            active ? <img src={item.icon_s} /> : <img src={item.icon_n} />
+            active ? <img src={item.icon_s} alt="icon" /> : <img src={item.icon_n} alt="icon" />
           }
           title={item.title}
         />
@@ -68,7 +68,7 @@ function App() {
       <div>
         <Outlet />
       </div>
-      <div className='border-t border-[#ebebeb]'>
+      <div className="border-t border-[#ebebeb]">
         <BottomBar />
       </div>
       <SafeArea position="bottom" />

src/components/konva/MeasurementCanvas.tsx

@@ -360,12 +360,12 @@ const MeasurementCanvas = forwardRef<MeasurementCanvasRef, MeasurementCanvasProp
             const xAxisStart = transform({ x: logicalExtent.minX, y: 0 });
             const xAxisEnd = transform({ x: logicalExtent.maxX, y: 0 });
             lines.push(
-                <Line key="x-axis" points={[xAxisStart.x, xAxisStart.y, xAxisEnd.x, xAxisEnd.y]} stroke="gray" strokeWidth={1} />
+                <Line key="x-axis" points={[xAxisStart.x, xAxisStart.y, xAxisEnd.x, xAxisEnd.y]} stroke="#ccc" strokeWidth={1} />
             );
             const yAxisStart = transform({ x: 0, y: logicalExtent.minY });
             const yAxisEnd = transform({ x: 0, y: logicalExtent.maxY });
             lines.push(
-                <Line key="y-axis" points={[yAxisStart.x, yAxisStart.y, yAxisEnd.x, yAxisEnd.y]} stroke="gray" strokeWidth={1} />
+                <Line key="y-axis" points={[yAxisStart.x, yAxisStart.y, yAxisEnd.x, yAxisEnd.y]} stroke="#ccc" strokeWidth={1} />
             );
             return lines;
         };

src/index.tsx

@@ -5,52 +5,35 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import {
   createHashRouter,
-  Navigate,
+  createRoutesFromElements,
+  Route,
   RouterProvider,
-} from "react-router-dom";
+} from 'react-router-dom';
 import Measure from './pages/Measure';
 import Setting from './pages/Setting';
 import Bluetooth from './pages/Bluetooth';
 import Mine from './pages/Mine';
 import MeasureSave from './pages/MeasureSave';
+import MeasureRecord from './pages/MeasureRecord';
 
-const router = createHashRouter([
-  {
-    path: "/",
-    element: <Navigate to="/home/measure" />
-  },
-  {
-    path: "/home",
-    element: <App />,
-    children: [
-      {
-        path: "measure",
-        element: <Measure />
-      },
-      {
-        path: "setting",
-        element: <Setting />
-      },
-      {
-        path: "bluetooth",
-        element: <Bluetooth />
-      },
-      {
-        path: "mine",
-        element: <Mine />
-      }
-    ]
-  },
-  {
-    path: "/measure/save",
-    element: <MeasureSave />
-  }
-]);
-
-
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+const router = createHashRouter(
+  createRoutesFromElements(
+    <Route path="/">
+      <Route path="home" element={<App />}>
+        <Route path="measure" index element={<Measure />}></Route>
+        <Route path="setting" element={<Setting />}></Route>
+        <Route path="bluetooth" element={<Bluetooth />}></Route>
+        <Route path="mine" element={<Mine />}></Route>
+      </Route>
+      <Route path="measure">
+        <Route path="save" element={<MeasureSave />}></Route>
+        <Route path="record" element={<MeasureRecord />}></Route>
+      </Route>
+    </Route>
+  )
 );
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
   <React.StrictMode>
     <RouterProvider router={router} />
@@ -61,4 +44,3 @@ root.render(
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
-