1. 安裝vite并創建一個react項目

使用 NPM:

npm create vite@latest

使用 Yarn:

 yarn create vite

使用 PNPM:

 pnpm create vite

1. 我使用的 yarn安裝，基本配置項目名字, 框架react ，js

2. cd vite-react進入項目目錄安裝node包并啟動項目

 yarn add install

加載之后使用啟動命令yarn run dev

2. 安裝引入Ant Design

• 引入依賴（我用的yarn，沒有安裝的也可以使用npm，根據自己情況選擇）

使用 npm:

 yarn add antd

使用 yarn:

npm install antd --save

安裝完成：

• 使用啟動命令：yarn run dev 或者npm run dev

• 清除App.jsx默認內容并引入antd

  1. 清空App.css和index.css文件中內容

  2. 修改App.jsx中內容

import { Button } from 'antd';
function App() {return (<><Button type="primary">Button</Button></>)
}
export default App

3. 頁面顯示：

3. 引入布局和菜單欄

1. 引入布局組件

1. 代碼

import React, { useState } from 'react';
import './App.css'
import { Button,Sider,Layout,Header,Space } from 'antd';
const headerStyle = {textAlign: 'letft',color: '#fff',height: 64,paddingInline: 10,lineHeight: '64px',backgroundColor: '#7dbcea',
};
const contentStyle = {textAlign: 'center',minHeight: 120,lineHeight: '120px',color: '#fff',backgroundColor: '#108ee9',
};
const siderStyle = {textAlign: 'center',lineHeight: '120px',color: '#fff',backgroundColor: '#3ba0e9',
};
const App = () => {return (<Layout><Sider style={siderStyle}></Sider><Layout><Header style={headerStyle}></Header><Content style={contentStyle}>Content</Content></Layout></Layout>);
};
export default App;

報錯：Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/antd.js?v=d0b75d53' does not provide an export named 'Header' (at App.jsx:3:36)

是因為引入方式不對：修改成就可以了，官網有我沒注意

import { Button, Layout, Space } from 'antd';
const { Header, Sider, Content } = Layout;

運行后發現多了默認樣式外邊距，修改默認樣式

使用在App.css中添加下面代碼，就解決了。

/* 更改默認樣式 */
body {margin: 0;
}

2. 引入左側菜單欄組件

?? 1. 代碼（手寫代碼在最后）

📖 2. 運行后，點擊按鈕沒反應

報錯：warning.js:19 Warning: [antd: Menu] inlineCollapsed not control Menu under

是因為位置設置錯誤，在Sider標簽上添加collapsed={collapsed}就可以了
![在這里插入圖片描述](https://img-blog.csdnimg.cn/15149d6dbab145ba9a4c82209e7d46
d6.png)

📖 重新運行

3. 調整布局樣式

?? 1. 新建src/views/index.jsx。把原來App.jsx文件內容轉移到新建的src/views/index.jsx中， 對App修改如下。注意引入jsx文件名字要大寫

📖 2. 運行后樣式

4. 添加動態路由設置

1. 集中react-router對比

* React-Router：

是一個通用的路由庫，適用于不同平臺的 React 應用。 提供了一些router的核心API，包括Router, Route,
Switch等，但是它沒有提供 DOM 操作進行跳轉的API。

* React-Router-DOM：

而 React Router DOM 是 React Router 的 Web 版本，提供了與瀏覽器環境相關的路由組件和功能。 提供了
BrowserRouter,HashRouter , Route, Link等 API,可以直接操作DOM 的事件控制路由。如點擊按鈕。
React Router DOM 是在 React Router 基礎上構建的，用于在 Web 應用中處理路由。它提供了與瀏覽器 URL
相關的功能，如基于瀏覽器歷史記錄的導航等。

* Reach Router：

它提供了類似于 React Router 的功能，但具有更簡單的 API 和更好的可訪問性支持。

2. 三種路由模式：HashRouter、BrowserRouter 和 MemoryRouter 都是 React Router 提供的路由組件

1. HashRouter組件：路徑上有"#"，
   它使用 URL 的哈希部分（#）來管理路由。在使用 HashRouter 時，URL 中的哈希部分將被用作路由路徑，不會觸發瀏覽器的頁面刷新。這種方式適用于靜態網站或需要在不同環境中部署的應用。

2. BrowserRouter組件：路徑上沒有"#"
   它使用 HTML5 的 History API 來管理路由。

3. MemoryRouter：
   它將路由信息存儲在內存中，而不是 URL 中。MemoryRouter 適用于在內存中管理路由狀態，例如在測試環境中進行單元測試或在非瀏覽器環境中使用 React Router。

2. 安裝/使用 React-Router-DOM

文檔：React-Router官方文檔可參考

* 安裝/引用：

1. 安裝：yarn add react-router-dom
   

2. 引用：import { BrowserRouter, Route, Link } from 'react-router-dom';

* 在導航組件中使用。 也可以新建routerAdmin.jsx作為管理router文件

動態路由完整代碼

?? 1. router文件

?? 2. App.jsx代碼

import React, { useState } from 'react';///---引入ui-組件庫
import { Button, Menu, Layout } from 'antd';
import {MenuFoldOutlined,MenuUnfoldOutlined,
} from '@ant-design/icons';
///---引入路由組件
import { Routes, Route, BrowserRouter } from 'react-router-dom';
import myRouter from './router/index'const App = () => {///---頁面邏輯const { Header, Sider, Content } = Layout;// --- 左側導航欄顯示隱藏邏輯const [collapsed, setCollapsed] = useState(false);const toggleCollapsed = () => {setCollapsed(!collapsed);};return (<BrowserRouter><Layout hasSider={true}><Sider style={{textAlign: 'center',color: '#333',backgroundColor: '#fff',}} collapsed={collapsed} ><Menumode="inline"items={myRouter}defaultSelectedKeys={['/purchase']} //默認選中keyonClick={(e) => {console.log(e)}}style={{ height: '100%', }}></Menu></Sider><Layout><Header style={{textAlign: 'letft',color: '#fff',height: 50,paddingInline: 10,lineHeight: '50px',backgroundColor: '#fff',}}><Buttontype="primary"onClick={toggleCollapsed}style={{marginBottom: 16,}}>{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}</Button></Header><Content style={{height: '100vh',textAlign: 'center',lineHeight: '120px',backgroundColor: '#fff',borderBottom: '1px solid #333'}}><Routes><Route exact path="/" element={<Purchase />} /><Route exact path="/purchase" element={<Purchase />} /><Route exact path="/inventory" element={<Inventory />} /><Route exact path="/roles" element={<RoleList />} /><Route exact path="/roles/new" element={<NewRole />} /><Route exact path="/settings/theme" element={<ThemeSettings />} /></Routes></Content></Layout></Layout></BrowserRouter>);
};const Purchase = () => {return <h1>Purchase Page</h1>;
};const Inventory = () => {return <h1>Inventory Page</h1>;
};const RoleList = () => {return <h1>Role List Page</h1>;
};const NewRole = () => {return <h1>New Role Page</h1>;
};const ThemeSettings = () => {return <h1>Theme Settings Page</h1>;
};
export default App;

📖 3.運行后頁面效果

開發中報錯：warning.js:19 Warning: [antd: Menu] children will be removed in next major version. Please use items instead.

Ant Design 的 Menu 組件的 children 屬性將在下一個主要版本中被移除。這意味著在未來的版本中，你應該使用 items 屬性來傳遞菜單項，而不是直接使用 Menu.Item 組件作為 Menu 組件的子元素。
如下新版本中使用時不對的：

修改成如下：

 <Menumode="inline"theme="dark"items={items}onClick={onClick}defaultSelectedKeys={['1']}defaultOpenKeys={['sub1']}>
</Menu>

開發中報錯：index.jsx:14 Uncaught SyntaxError: The requested module ‘/node_modules/.vite/deps/react-router-dom.js?v=e8aea50f’ does not provide an export named ‘useHistory’

1. 沒有使用最新版本的“react-router-dom”模塊，npm升級模塊：npm update react-router-dom。
2. 當如方法不對，應該是“import { useHistory } from ‘react-router-dom’”。
3. 如果以上兩種方式都無法解決問題，可以嘗試刪除“node_modules”文件夾，并重新安裝
4. 如果上述方法都不能解決問題，你可以使用其他版本的“react-router-dom”模塊，或者嘗試使用其他的路由模塊。

開發報錯：TypeError: Cannot destructure property ‘basename’ of ‘React.useContext(…)’

是因為link標簽沒有被BrowserRouter標簽包裹

  <BrowserRouter>
///此處寫link邏輯就可以了
</BrowserRouter>

開發踩坑： 配置好之后路由更新了，頁面沒有更新。

發現是Route屬性使用錯誤了， <Route exact path=“/” element={} />，我把element使用成component了，改了就可以了，

開發踩坑： react使用antd中刷新頁面時候 ，布局有閃爍，查找發現使用Sider標簽加載頁面會有閃爍

是由于 Sider 組件的初始狀態導致的。Sider 組件默認是收起狀態，當它在頁面加載時展開時，可能會導致頁面內容重新布局，從而引起閃爍。官網又給出Layout 標簽屬性hasSider