前言

由于C#用的真的太舒服了，導(dǎo)致我其它語言其它框架都只是淺淺的了解一下，沒寫過多少代碼，就偶爾用下Python。現(xiàn)在AI時代其實熟練了一門語言，去學(xué)習(xí)其它語言其它框架其實是很方便的，AI就是最好的老師，基礎(chǔ)知識你都不需要用很好的AI，國產(chǎn)的glm-4.6、kimi k2就夠了。

C#是我的舒適區(qū)，WPF也是我的舒適區(qū)，現(xiàn)在嘗試跳出舒適區(qū)多接觸一些新語言新框架。以前的學(xué)習(xí)方式可能是看官方文檔，再找找博客或者看視頻學(xué)習(xí)，現(xiàn)在的學(xué)習(xí)方式我覺得自己先稍微過一下官方文檔，了解一些基礎(chǔ)概念，然后就配合AI上手寫你想實現(xiàn)的東西，在實現(xiàn)的過程中學(xué)習(xí)。

AI時代寫博客方式可能也有所改變，更多人想知道的其實是你實現(xiàn)的過程，而不是具體的知識點，具體的知識點，普通人很難比得過AI。

過程

React介紹

React 是一個用于構(gòu)建用戶界面的 JavaScript 庫。

聲明式：React 使創(chuàng)建交互式 UI 變得毫不費力。為應(yīng)用中的每個狀態(tài)設(shè)計簡單的視圖，當(dāng)數(shù)據(jù)變化時，React 將高效地更新和渲染正確的組件。聲明式視圖使您的代碼更具可預(yù)測性，更易于理解，更易于調(diào)試。

組件化：構(gòu)建封裝的組件來管理它們自己的狀態(tài)，然后將它們組合起來構(gòu)建復(fù)雜的 UI。由于組件邏輯是用 JavaScript 編寫而不是模板，因此您可以輕松地在應(yīng)用程序中傳遞豐富數(shù)據(jù)，并將狀態(tài)與 DOM 分離。

學(xué)習(xí)一次，隨處編寫：我們不會對您技術(shù)棧的其他部分做出假設(shè)，因此您可以在不重寫現(xiàn)有代碼的情況下使用 React 開發(fā)新功能。React 也可以使用 Node 在服務(wù)器端渲染，并使用 React Native 開發(fā)移動應(yīng)用。

GitHub地址：https://github.com/facebook/react?tab=readme-ov-file

官方文檔：https://react.dev/learn

先大致過一下官網(wǎng)文檔內(nèi)容，了解一下React的基礎(chǔ)概念。

然后先使用Vite構(gòu)建一個React應(yīng)用。

Vite介紹

Vite（法語中的“快速”，發(fā)音為 /vit/ ，類似“veet”）是一種新型的前端構(gòu)建工具，極大地提升了前端開發(fā)體驗。它主要由兩部分組成：

一個開發(fā)服務(wù)器，通過原生 ES 模塊提供您的源文件，并具備豐富的內(nèi)置功能和驚人的快速熱模塊替換 (HMR)。

用于打包代碼的構(gòu)建命令，使用 Rollup 預(yù)先配置，以輸出針對生產(chǎn)環(huán)境高度優(yōu)化的靜態(tài)資源。

此外，Vite 通過其插件 API 和 JavaScript API 高度可擴展，并完全支持類型定義。

GitHub地址：https://github.com/vitejs/vite

構(gòu)建成功后，跟你的AI助手（我用的是Kilo Code）說：“我想創(chuàng)建一個左邊是菜單，右邊是內(nèi)容的導(dǎo)航布局應(yīng)用”。

AI就幫你寫了一個，先看下AI寫的效果，如果是自己想要的，那就停下來學(xué)習(xí)一下AI是怎么寫的。

在終端中輸入npm run dev運行這個React應(yīng)用查看效果：

先不用管為什么首頁這么不搭，首頁被我改過了，反正現(xiàn)在是AI已經(jīng)幫我完成了我們想要實現(xiàn)的一個效果，現(xiàn)在可以停下來學(xué)習(xí)一下AI是如何實現(xiàn)的了。

AI時代好像總有一種實現(xiàn)焦慮，想要叫AI給我們干很多事情，讓AI實現(xiàn)自己的想法，這確實很美好，但是我突然意識到如果自己不懂的話，很難駕馭好AI，而且總給我一種很虛的感覺，寫的再多再好也不是自己的，都是AI的，自己啥也不懂，沒有之前自己寫代碼那種踏實的感覺。

AI時代，自己越來越覺得慢就是快，慢慢來，不要著急，技術(shù)是永遠也學(xué)不完的，與其讓AI實現(xiàn)一個自己啥也不懂的，只是可以運行的程序，不如先慢下來，在實現(xiàn)中學(xué)習(xí)，這樣對自己成長也有幫助，只有自己真正懂的了才是自己的，不然都只是AI的。

現(xiàn)在來看看AI是如何幫我們實現(xiàn)這個導(dǎo)航應(yīng)用的。

首先AI使用了react-router，我們先來了解一下。

react-router介紹

React Router 是一個用于 React 的多策略路由器，彌合了從 React 18 到 React 19 的差距。你可以將其作為 React 框架最大程度地使用，也可以將其作為庫最小程度地使用，并結(jié)合自己的架構(gòu)。

GitHub地址：https://github.com/remix-run/react-router

先看項目結(jié)構(gòu)：

首先寫了不同的頁面與樣式，做了一個Sidebar組件：

import { Link, useLocation } from 'react-router-dom';
import './Sidebar.css';

const Sidebar = () => {
  const location = useLocation();

  const menuItems = [
    { path: '/', label: '聊天', icon: '??' },
    { path: '/about', label: '關(guān)于我們', icon: '??' },
    { path: '/products', label: '產(chǎn)品', icon: '??' },
    { path: '/contact', label: '聯(lián)系方式', icon: '??' },
    { path: '/settings', label: '設(shè)置', icon: '??' }
  ];

  return (
    <div className="sidebar">
      <div className="sidebar-header">
        <h2>Agent學(xué)習(xí)</h2>
      </div>
      <nav className="sidebar-nav">
        <ul className="menu-list">
          {menuItems.map((item) => (
            <li key={item.path} className="menu-item">
              <Link
                to={item.path}
                className={`menu-link ${location.pathname === item.path ? 'active' : ''}`}
              >
                <span className="menu-icon">{item.icon}</span>
                <span className="menu-label">{item.label}</span>
              </Link>
            </li>
          ))}
        </ul>
      </nav>
    </div>
  );
};

export default Sidebar;

在這個組件中，主要使用了Link與useLocation。

Link 是 React Router 提供的導(dǎo)航組件，用于在應(yīng)用內(nèi)部進行頁面跳轉(zhuǎn)。

to 屬性：指定目標(biāo)路徑，如 '/'、'/about' 等。

useLocation() 是 React Router 提供的自定義 Hook。

返回值：包含當(dāng)前路由信息的 location 對象

主要屬性：

location.pathname：當(dāng)前URL的路徑部分（如 /about)

location.search：查詢字符串

location.hash：URL的hash部分

工作流程：

用戶點擊菜單項 → Link 組件觸發(fā)路由跳轉(zhuǎn)

頁面更新 → useLocation() 獲取新的路徑信息

組件重新渲染 → 根據(jù)新路徑設(shè)置正確的 active 類名

CSS樣式應(yīng)用 → 當(dāng)前頁面對應(yīng)的菜單項高亮顯示

現(xiàn)在再來看看App.tsx：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Sidebar from './components/Sidebar';
import Home from './pages/Home';
import About from './pages/About';
import Products from './pages/Products';
import Contact from './pages/Contact';
import Settings from './pages/Settings';
import './App.css';

function App() {
  return (
    <Router>
      <div className="app">
        <Sidebar />
        <main className="main-content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/products" element={<Products />} />
            <Route path="/contact" element={<Contact />} />
            <Route path="/settings" element={<Settings />} />
          </Routes>
        </main>
      </div>
    </Router>
  );
}

export default App;

使用到了BrowserRouter、Routes與Route。

BrowserRouter (重命名為 Router)

這是 React Router 中最常用的路由器類型，它使用 HTML5 的 history API 來保持 UI 和 URL 同步，重命名為 Router 是為了代碼簡潔，是常見的做法。

Routes

用于包裹一組路由規(guī)則，是 React Router v6+ 中的新組件，它會根據(jù)當(dāng)前 URL 匹配最合適的路由并渲染對應(yīng)的組件。

Route

定義單個路由規(guī)則，包含路徑和要渲染的組件，使用 path 屬性指定 URL 路徑，element 屬性指定要渲染的組件。

工作原理

Router 包裹整個應(yīng)用，啟用路由功能

Sidebar 組件中使用 Link 組件創(chuàng)建導(dǎo)航鏈接

Routes 作為路由容器，內(nèi)部包含多個 Route 定義

當(dāng)用戶點擊 Sidebar 中的鏈接時，URL 會改變，Routes 會根據(jù)新的 URL 匹配對應(yīng)的 Route 并渲染相應(yīng)組件

這樣就實現(xiàn)了一個簡單的React導(dǎo)航應(yīng)用了。