增加 fallbackElement

src/main.jsx

@@ -6,7 +6,7 @@ import {
   RouterProvider,
 } from "react-router-dom";
 import RootStore from "./stores/Root";
-import { StoreContext } from './stores/StoreContext.js';
+import { StoreContext } from './stores/StoreContext';
 import "./global.css";
 import App from "./views/App";
 import Index from "./views/index";
@@ -42,7 +42,10 @@ const rootStore = new RootStore();
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <StoreContext.Provider value={rootStore}>
-      <RouterProvider router={router} />
+      <RouterProvider 
+        router={router}
+        fallbackElement={() => <div>Loading...</div>}
+      />
     </StoreContext.Provider>
   </React.StrictMode>
 );

src/views/App.jsx

@@ -1,10 +1,6 @@
 import { Outlet, Link, useNavigation } from "react-router-dom";
-import { useState, useEffect } from 'react';
 import { Breadcrumb, Layout, Menu, ConfigProvider, theme, Dropdown, Space, Row, Col } from 'antd';
 import {
-  MenuFoldOutlined,
-  MenuUnfoldOutlined,
-  UploadOutlined,
   UserOutlined,
   VideoCameraOutlined,
   DownOutlined

src/views/Plan.jsx

@@ -1,10 +1,7 @@
-import { Form, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import { observer } from "mobx-react";
-import { Row, Col, Typography, Space, DatePicker, Button, Select, Table, Tag } from 'antd';
+import { Row, Col, Space, Button, Table, Tag } from 'antd';
-import {
-  SearchOutlined,
-} from '@ant-design/icons';
 import { useStore } from '../stores/StoreContext.js';
 
 const columns = [
@@ -82,7 +79,6 @@ const data = [
 function Plan() {
   
   const {planId} = useParams();
-  const [count, setCount] = useState(0);
   const store = useStore();
   const planStore = store.plan;
 
@@ -90,15 +86,6 @@ function Plan() {
     console.info('planId: ' + planId);
 	}, [planId]);
 
-  const contact = {
-    first: "Your",
-    last: "Name",
-    avatar: "https://placekitten.com/g/200/200",
-    twitter: "your_handle",
-    notes: "Some notes",
-    favorite: true,
-  };
-
   return (
     <Space direction="vertical" style={{ width: '100%' }}>
     <Row gutter={{ md: 24 }} justify="end">
@@ -120,24 +107,4 @@ function Plan() {
   );
 }
 
-function Favorite({ contact }) {
-  // yes, this is a `let` for later
-  let favorite = contact.favorite;
-  return (
-    <Form method="post">
-      <button
-        name="favorite"
-        value={favorite ? "false" : "true"}
-        aria-label={
-          favorite
-            ? "Remove from favorites"
-            : "Add to favorites"
-        }
-      >
-        {favorite ? "★" : "☆"}
-      </button>
-    </Form>
-  );
-}
-
 export default observer(Plan);