提交路由问题

src/component/content/content_side/index.jsx

@@ -15,9 +15,7 @@ export default class ContentSide extends Component{
                 </a>
             </div>
             <div class="zl-365-content-side-li">
-                <a class="content-side-li-nav" href="/Microsoft365/document" title="文档" target="_self">
-                    <span class="content-side-li-nav-text">文档</span>
-                </a>
+                <MyNavlink to="/document" >文档</MyNavlink>
             </div>
             <div class="zl-365-content-side-li">
                 <a class="content-side-li-nav" href="#" title="笔记本" target="_self">

src/component/content/index.jsx

@@ -2,9 +2,7 @@ import React, { Component } from "react";
 import "./index.css";
 import ContentHeader from "./content_header";
 import ContentSide from "./content_side";
-import { Routes, Route } from "react-router-dom";
-import Home from "../../pages/home";
-import List from "../../pages/listnew";
+import { Outlet } from "react-router-dom";
 
 export default class Content extends Component {
   render() {
@@ -13,10 +11,7 @@ export default class Content extends Component {
         <ContentHeader></ContentHeader>
         <ContentSide></ContentSide>
         <div className="zl-365-list">
-          <Routes>
-            <Route path="/home" Component={Home}></Route>
-            <Route path="/listnew" Component={List}></Route>
-          </Routes>
+          <Outlet/>
         </div>
       </div>
     );

src/index.tsx

@@ -1,22 +1,20 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
-import { App } from "./App";
-import './locales'
+import "./locales";
 import reportWebVitals from "./reportWebVitals";
 import { FluentProvider, webLightTheme } from "@fluentui/react-components";
-import { BrowserRouter } from "react-router-dom";
+import { RouterProvider } from "react-router-dom";
+import router from "./router/index";
 
-const container = document.getElementById('root');
+const container = document.getElementById("root");
 const root = createRoot(container!); // 创建一个根
 
 // 使用 createRoot 渲染你的应用
 root.render(
-  <BrowserRouter>
-    <FluentProvider theme={webLightTheme}>
-      <App />
-    </FluentProvider>
-  </BrowserRouter>
+  <FluentProvider theme={webLightTheme}>
+    <RouterProvider router={router} />
+  </FluentProvider>
 );
 
 reportWebVitals();

src/router/index.js

@@ -0,0 +1,28 @@
+import { createBrowserRouter } from "react-router-dom";
+import { App } from "../App";
+import Document from '../pages/document';
+import Home from '../pages/home';
+import ListNew from '../pages/listnew';
+
+const router = createBrowserRouter([
+    {
+        path: '/',
+        element: <App />,
+        children:[
+            {
+                path: '/document',
+                element: <Document/>
+            },
+            {
+                path: '/home',
+                element: <Home/>
+            },
+            {
+                path: '/listnew',
+                element: <ListNew/>
+            }
+        ]
+    }
+])
+
+export default router;