package.json

@@ -10,6 +10,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-router-dom:
+        specifier: ^6.27.0
+        version: 6.27.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-scripts:
         specifier: 5.0.1
         version: 5.0.1(@babel/plugin-syntax-flow@7.26.0(@babel/core@7.26.0))(@babel/plugin-transform-react-jsx@7.25.9(@babel/core@7.26.0))(@types/babel__core@7.20.5)(eslint@8.57.1)(react@18.3.1)(type-fest@0.21.3)(typescript@4.9.5)
@@ -1562,6 +1565,10 @@ packages:
       webpack-plugin-serve:
         optional: true
 
+  '@remix-run/router@1.20.0':
+    resolution: {integrity: sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==}
+    engines: {node: '>=14.0.0'}
+
   '@rollup/plugin-babel@5.3.1':
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
@@ -5017,6 +5024,19 @@ packages:
     resolution: {integrity: sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==}
     engines: {node: '>=0.10.0'}
 
+  react-router-dom@6.27.0:
+    resolution: {integrity: sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
+  react-router@6.27.0:
+    resolution: {integrity: sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: '>=16.8'
+
   react-scripts@5.0.1:
     resolution: {integrity: sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==}
     engines: {node: '>=14.0.0'}
@@ -8455,6 +8475,8 @@ snapshots:
       type-fest: 0.21.3
       webpack-dev-server: 4.15.2(webpack@5.96.1)
 
+  '@remix-run/router@1.20.0': {}
+
   '@rollup/plugin-babel@5.3.1(@babel/core@7.26.0)(@types/babel__core@7.20.5)(rollup@2.79.2)':
     dependencies:
       '@babel/core': 7.26.0
@@ -12535,6 +12557,18 @@ snapshots:
 
   react-refresh@0.11.0: {}
 
+  react-router-dom@6.27.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@remix-run/router': 1.20.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-router: 6.27.0(react@18.3.1)
+
+  react-router@6.27.0(react@18.3.1):
+    dependencies:
+      '@remix-run/router': 1.20.0
+      react: 18.3.1
+
   react-scripts@5.0.1(@babel/plugin-syntax-flow@7.26.0(@babel/core@7.26.0))(@babel/plugin-transform-react-jsx@7.25.9(@babel/core@7.26.0))(@types/babel__core@7.20.5)(eslint@8.57.1)(react@18.3.1)(type-fest@0.21.3)(typescript@4.9.5):
     dependencies:
       '@babel/core': 7.26.0

src/component/content/content_side/index.jsx

@@ -1,68 +1,67 @@
 import React, { Component } from "react";
+import MyNavlink from '../../myNavLink';
 
 export default class ContentSide extends Component{
     render(){
         return (
-            <div class="zl-365-content-side">
-    <div class="zl-365-content-side-ul">
-        <div class="zl-365-content-side-li  side-li-active">
-            <a class="content-side-li-nav" href="/Microsoft365/home" title="主页" target="_self">
-                <span class="content-side-li-nav-text">主页</span>
-            </a>
+        <div class="zl-365-content-side">
+        <div class="zl-365-content-side-ul">
+            <div class="zl-365-content-side-li">
+                <MyNavlink to="/home" >主页</MyNavlink>
+            </div>
+            <div class="zl-365-content-side-li">
+                <a class="content-side-li-nav" href="#" title="对话" target="_self">
+                    <span class="content-side-li-nav-text">对话</span>
+                </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>
+            </div>
+            <div class="zl-365-content-side-li">
+                <a class="content-side-li-nav" href="#" title="笔记本" target="_self">
+                    <span class="content-side-li-nav-text">笔记本</span>
+                </a>
+            </div>
+            <div class="zl-365-content-side-li">
+                <a class="content-side-li-nav" href="/Microsoft365/listnew" title="测试人员列表" target="_self">
+                    <span class="content-side-li-nav-text">测试人员列表</span>
+                </a>
+            </div>
+            <div class="zl-365-content-side-li">
+                <a class="content-side-li-nav" href="#" title="页面" target="_self">
+                    <span class="content-side-li-nav-text">页面</span>
+                </a>
+            </div>
+            <div class="zl-365-content-side-li">
+                <a class="content-side-li-nav" href="#" title="网站内容" target="_self">
+                    <span class="content-side-li-nav-text">网站内容</span>
+                </a>
+            </div>
+            <div class="zl-365-content-side-li">
+                <a class="content-side-li-nav" href="#" title="回收站" target="_self">
+                    <span class="content-side-li-nav-text">回收站</span>
+                </a>
+            </div>
+            <div class="zl-365-content-side-li">
+                <a class="content-side-li-nav" href="#" title="编辑" target="_self">
+                    <span class="content-side-li-nav-text color-theme">编辑</span>
+                </a>
+            </div>
         </div>
-        <div class="zl-365-content-side-li">
-            <a class="content-side-li-nav" href="#" title="对话" target="_self">
-                <span class="content-side-li-nav-text">对话</span>
-            </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>
-        </div>
-        <div class="zl-365-content-side-li">
-            <a class="content-side-li-nav" href="#" title="笔记本" target="_self">
-                <span class="content-side-li-nav-text">笔记本</span>
-            </a>
-        </div>
-        <div class="zl-365-content-side-li">
-            <a class="content-side-li-nav" href="/Microsoft365/listnew" title="测试人员列表" target="_self">
-                <span class="content-side-li-nav-text">测试人员列表</span>
-            </a>
-        </div>
-        <div class="zl-365-content-side-li">
-            <a class="content-side-li-nav" href="#" title="页面" target="_self">
-                <span class="content-side-li-nav-text">页面</span>
-            </a>
-        </div>
-        <div class="zl-365-content-side-li">
-            <a class="content-side-li-nav" href="#" title="网站内容" target="_self">
-                <span class="content-side-li-nav-text">网站内容</span>
-            </a>
-        </div>
-        <div class="zl-365-content-side-li">
-            <a class="content-side-li-nav" href="#" title="回收站" target="_self">
-                <span class="content-side-li-nav-text">回收站</span>
-            </a>
-        </div>
-        <div class="zl-365-content-side-li">
-            <a class="content-side-li-nav" href="#" title="编辑" target="_self">
-                <span class="content-side-li-nav-text color-theme">编辑</span>
-            </a>
-        </div>
-    </div>
-    <div class="zl-365-content-side-teamify">
-        <div class="side-teamify-title">
-            <div class="side-teamify-title-svg"></div>
-            <div class="side-teamify-title-svg-text">添加实时聊天</div>
-        </div>
-        <div class="side-teamify-description">
-            添加 Microsoft Teams 进行实时协作，并在 Microsoft 365 中与团队共享资源。
-            <span class="side-teamify-description-tip"></span>
-            <div class="side-teamify-description-link">添加 Microsoft Teams</div>
+        <div class="zl-365-content-side-teamify">
+            <div class="side-teamify-title">
+                <div class="side-teamify-title-svg"></div>
+                <div class="side-teamify-title-svg-text">添加实时聊天</div>
+            </div>
+            <div class="side-teamify-description">
+                添加 Microsoft Teams 进行实时协作，并在 Microsoft 365 中与团队共享资源。
+                <span class="side-teamify-description-tip"></span>
+                <div class="side-teamify-description-link">添加 Microsoft Teams</div>
+            </div>
         </div>
     </div>
-</div>
         )
     }
 }

src/component/content/index.jsx

@@ -1,16 +1,22 @@
 import React, { Component } from "react";
-import './index.css';
+import "./index.css";
 import ContentHeader from "./content_header";
-import ContentSide from './content_side';
+import ContentSide from "./content_side";
+import { Routes, Route } from "react-router-dom";
+import Home from "../../pages/home";
 
-export default class Content extends Component{
-    render(){
-        return (
-            <div class="zl-365-content">
-                <ContentHeader></ContentHeader>
-                <ContentSide></ContentSide>
-            </div>
- 
-        )
-    }
-}
+export default class Content extends Component {
+  render() {
+    return (
+      <div class="zl-365-content">
+        <ContentHeader></ContentHeader>
+        <ContentSide></ContentSide>
+        <div>
+          <Routes>
+            <Route path="/home" Component={Home}></Route>
+          </Routes>
+        </div>
+      </div>
+    );
+  }
+}

src/component/myNavLink/index.jsx

@@ -0,0 +1,10 @@
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+
+export default class MyNavlink extends Component {
+    render() {
+        return (
+            <NavLink className="content-side-li-nav" {...this.props} />
+        )
+    }
+}

src/index.js

@@ -4,12 +4,15 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { FluentProvider, webLightTheme } from '@fluentui/react-components';
+import { BrowserRouter } from 'react-router-dom';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <FluentProvider theme={webLightTheme}>
-    <App />
-  </FluentProvider>,
+  <BrowserRouter>
+    <FluentProvider theme={webLightTheme}>
+      <App />
+    </FluentProvider>
+  </BrowserRouter>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/pages/document/index.jsx

@@ -0,0 +1,9 @@
+import React, { Component } from "react";
+
+export default class MyNavlink extends Component {
+    render() {
+        return (
+            <div>文档</div>
+        )
+    }
+}

src/pages/home/index.jsx

@@ -0,0 +1,9 @@
+import React, { Component } from "react";
+
+export default class MyNavlink extends Component {
+    render() {
+        return (
+            <div>主页</div>
+        )
+    }
+}

src/pages/listnew/index.jsx

@@ -0,0 +1,9 @@
+import React, { Component } from "react";
+
+export default class MyNavlink extends Component {
+    render() {
+        return (
+            <div>测试页面</div>
+        )
+    }
+}