前端面试专栏-主流框架：11. React Router路由原理与实践

爱分享的程序员2025-06-22 22:23

🔥 欢迎来到前端面试通关指南专栏！从js精讲到框架到实战，渐进系统化学习，坚持解锁新技能，祝你轻松拿下心仪offer。前端面试通关指南专栏主页

我将从React Router的核心概念、原理剖析入手，结合不同类型路由的特点，深入讲解其在实际项目中的配置与应用，帮助你全面掌握React Router。

React Router路由原理与实践详解

引言

在现代前端开发中，单页应用（SPA）已成为主流。React Router作为React应用中最流行的路由库，它允许开发者根据URL的变化来渲染不同的组件，从而实现单页应用的页面导航功能。理解React Router的路由原理与实践技巧，对于构建高效、灵活的前端应用至关重要。

React Router核心概念

Router

Router提供了路由功能的全局上下文，它是整个路由系统的基础。在React Router中，有多种Router可供选择，如BrowserRouter、HashRouter、MemoryRouter和StaticRouter。

  • BrowserRouter ：通过路由器原生路由进行路由态管理，页面跳转通过pushState、popState方法实现。它提供了真实的URL，用户体验更友好，有利于搜索引擎优化（SEO），适用于面向广大普通用户的现代化Web应用。但在服务器端，如果没有正确配置路由的处理，当用户直接访问一个子路由时，服务器可能会返回404错误。
  • HashRouter ：使用URL的哈希值（#后面的部分）来管理路由。兼容性好，所有浏览器都支持哈希路由，且服务器不需要做任何特殊的路由配置。不过，哈希路由的URL不太美观，可能对SEO有一定影响。适用于需要兼容低版本浏览器的项目或简单的单页应用开发。
  • MemoryRouter：将路由状态存储在内存中，非常适合在测试环境中使用，或者在一些不需要与浏览器历史或地址栏交互的特定场景下。但在页面刷新或重新加载时，路由状态会丢失。
  • StaticRouter：专为服务器端渲染（SSR）设计，能够在服务器端根据请求的URL准确地渲染对应的组件，有助于提高首屏加载速度和SEO。但仅在服务器端使用，不能在客户端独立运行。

Route

Route是React Router中定义URL路径与组件映射关系的核心组件。它通过比较当前URL与自身的path属性来决定是否渲染对应的React组件，同时支持多种匹配模式和参数传递。

基础使用

每个Route组件包含两个关键属性：

  • path：指定要匹配的URL路径模式
  • element：匹配成功时要渲染的React组件

示例代码展示了一个典型的路由配置：

javascript 复制代码 
import { Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Routes>
      {/* 根路径匹配 */}
      <Route path="/" element={<Home />} />
      {/* 精确路径匹配 */}
      <Route path="/about" element={<About />} />
    </Routes>
  );
}
运行机制

当URL发生变化时，React Router会：

  1. 遍历所有Route组件
  2. 将当前URL与每个Route的path进行匹配
  3. 找到第一个匹配的Route后停止匹配
  4. 渲染该Route对应的element组件
高级特性
  1. 路径参数：
javascript 复制代码 
<Route path="/users/:userId" element={<UserProfile />} />

可以提取URL中的动态参数(如userId)

  1. 嵌套路由：
javascript 复制代码 
<Route path="/products" element={<Products />}>
  <Route path=":productId" element={<ProductDetail />} />
</Route>
  1. 匹配优先级：
  • 更具体的路径优先匹配
  • index路由用于父路径的默认渲染
  1. 匹配模式：
  • 默认是前缀匹配(可通过exact属性控制)
  • 支持通配符*匹配任意路径

在示例中：

  • 访问/ → 渲染Home组件
  • 访问/about → 渲染About组件
  • 访问未定义路径 → 不渲染任何组件(可以添加404路由处理)

Link 是 React Router 提供的重要导航组件，它允许开发者在单页应用(SPA)中实现客户端路由导航。与传统的 <a> 标签不同，Link 组件不会触发页面刷新，而是通过 React Router 的内部机制实现平滑的页面切换。

核心特性：
  1. 无刷新导航：仅在客户端处理路由变化，保持应用状态
  2. URL 同步：更新浏览器地址栏的 URL
  3. 路由匹配：触发对应的路由配置渲染相应组件
详细使用示例：
javascript 复制代码 
import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav className="app-nav">
      <ul>
        <li>
          <Link 
            to="/" 
            className="nav-link"
            activeClassName="active" // 可选：当前路由匹配时添加的类名
          >
            首页
          </Link>
        </li>
        <li>
          <Link 
            to="/about" 
            state={{ from: 'navigation' }} // 可选：传递状态数据
          >
            关于我们
          </Link>
        </li>
        <li>
          <Link 
            to="/products" 
            replace={true} // 可选：替换当前历史记录
          >
            产品中心
          </Link>
        </li>
      </ul>
    </nav>
  );
}
常见属性说明：

  • to：必填，可以是字符串路径或对象

    javascript 复制代码 
    // 对象形式支持更多配置
<Link to={{
  pathname: '/user',
  search: '?id=123',
  hash: '#profile',
  state: { userData }
}}>

  • replace：是否替换当前历史记录而不是添加新记录

  • innerRef：获取底层 DOM 节点的引用

  • component：自定义渲染组件

实际应用场景：
  1. 网站主导航栏
  2. 面包屑导航
  3. 分页控制
  4. 列表项详情链接
  5. 模态框/抽屉导航

注意：Link 必须位于 Router 组件（如 BrowserRouter）的上下文中才能正常工作。

History

History是浏览器内置的对象，它记录了用户在浏览器访问页面的会话历史记录，允许用户通过前进/后退按钮在不同的URL之间导航。React Router通过抽象层封装了浏览器的History API，提供了更便捷的方式来管理客户端路由的历史记录。

在实现上，React Router支持三种不同的历史记录类型：

  1. Browser History - 使用HTML5 History API创建干净的URL
  2. Hash History - 使用URL hash部分（如/#/about）来实现路由
  3. Memory History - 将历史记录保存在内存中，适用于非浏览器环境

History对象提供的主要方法包括：

  • push(path) - 添加新的历史记录条目并导航到新URL
  • replace(path) - 替换当前历史记录条目
  • go(n) - 在历史记录中前进或后退n步
  • goBack() - 等同于go(-1)
  • goForward() - 等同于go(1)

实际应用示例：

javascript 复制代码 
import { useNavigate } from 'react-router-dom';

function UserProfile() {
  const navigate = useNavigate();
  
  const handleSave = () => {
    // 保存用户资料后跳转到个人主页
    navigate('/profile', { 
      state: { message: '资料保存成功' },
      replace: true  // 替换当前历史记录而不是添加新条目
    });
  };

  return (
    <div>
      {/* 表单内容 */}
      <button onClick={handleSave}>保存</button>
      <button onClick={() => navigate(-1)}>返回</button>
    </div>
  );
}

在更复杂的场景中，还可以监听历史记录的变化：

javascript 复制代码 
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function AnalyticsTracker() {
  const location = useLocation();
  
  useEffect(() => {
    // 每次路由变化时发送分析数据
    sendAnalytics(location.pathname);
  }, [location]);

  return null;
}

通过合理使用History API，开发者可以实现流畅的单页应用导航体验，同时保持浏览器历史记录的完整性。

React Router路由原理剖析

URL解析与路径匹配

当URL发生变化时（无论是通过浏览器地址栏直接输入、点击链接还是编程式导航），React Router会启动以下解析和匹配流程：

  1. URL分解：

    • React Router首先使用浏览器提供的window.locationAPI解析URL

    • 将URL拆分为几个关键部分：

      • pathname：主要路径部分（如/products/123）
      • search：查询字符串（如?sort=price）
      • hash：哈希值（如#details）

    • 例如：对于URLhttps://example.com/products/123?sort=price#details，会解析为：

      javascript 复制代码 
      {
  pathname: '/products/123',
  search: '?sort=price',
  hash: '#details'
}

  2. 路径匹配算法：

    • Router会遍历所有在应用中定义的<Route>组件
    • 将URL的pathname与每个Route的path属性进行匹配，匹配规则包括：
      • 静态路径 ：如path="/about"只匹配完全相同的路径
      • 动态参数 ：如path="/products/:id"可以匹配/products/123，并将123作为参数id
      • 可选参数 ：如path="/docs/:section?/"可以匹配/docs/getting-started/或/docs/
      • 通配符 ：如path="/files/*"可以匹配/files/下任意子路径
    • 匹配顺序遵循"先到先得"原则，第一个匹配的Route会被选中

  3. 匹配优先级：

    • 精确路径path="/about"比动态路径path="/:page"优先级更高
    • 当多个Route可能匹配同一路径时，可以使用exact属性强制精确匹配
    • 如果没有匹配项，可以设置path="*"的404路由作为fallback

  4. 参数提取：

    • 成功匹配后，Router会提取路径中的动态参数

    • 例如path="/user/:userId/posts/:postId"匹配/user/123/posts/456时：

      javascript 复制代码 
      params: {
  userId: '123',
  postId: '456'
}

    • 这些参数可以通过useParams()hook在组件中获取

  5. 查询参数处理：

    • 查询字符串会被解析为对象格式

    • 例如?name=John&age=30会被转换为：

      javascript 复制代码 
      { name: 'John', age: '30' }

    • 可通过useLocation()或useSearchParams()获取

组件渲染与参数传递机制详解

在React Router中，组件渲染与参数传递是路由系统的核心功能之一。当浏览器URL发生变化时，Router会执行以下完整过程：

  1. 路由匹配阶段：

    • Router会在路由配置树中深度优先搜索，寻找与当前URL最匹配的Route组件
    • 对于动态路由如/user/:id，会建立参数捕获组，将冒号后的部分作为参数键名

  2. 参数提取与传递：

    • 匹配成功后，Router会将URL中的动态部分解析成键值对
    • 例如访问/user/123时，会自动生成{ id: '123' }的参数对象
    • 这些参数会通过React的context机制向下传递

  3. 组件渲染方式：

    • 支持三种渲染方式：

      javascript 复制代码 
      // 方式1：component属性（最常用）
<Route path="/user/:id" component={User} />

// 方式2：render属性（需要额外逻辑时）
<Route path="/user/:id" render={(props) => <User {...props} extraData={data} />} />

// 方式3：children属性（无论是否匹配都渲染）
<Route path="/user/:id" children={<User />} />

  4. 参数获取方法：

    • 在类组件中可以通过this.props.match.params获取

    • 函数式组件推荐使用useParams钩子：

      javascript 复制代码 
      import { useParams, useRouteMatch } from 'react-router-dom';

function UserProfile() {
  const params = useParams(); // { id: '123' }
  const match = useRouteMatch(); // 包含完整匹配信息
  
  // 典型应用场景
  useEffect(() => {
    fetchUserData(params.id);
  }, [params.id]);
  
  return (
    <div>
      <h2>用户详情</h2>
      <p>当前用户ID: {params.id}</p>
      <p>匹配路径: {match.path}</p>
    </div>
  );
}

  5. 类型安全（TypeScript示例）：

    typescript 复制代码 
    type UserParams = {
  id: string;
  tab?: 'posts' | 'photos'; // 可选参数
};

function UserPage() {
  const { id, tab = 'posts' } = useParams<UserParams>();
  // ...业务逻辑
}

实际开发中，参数传递常用于：

  • 用户个人页面（如/user/:username）
  • 商品详情页（如/product/:productId）
  • 分页查询（如/articles/:pageNum）
  • 多级导航（如/category/:main/:sub）

注意事项：

  1. 参数总是字符串类型，需要手动转换数字类型
  2. 参数变化不会自动触发组件remount，需用useEffect监听变化
  3. 可选参数需在path中用问号标记，如/user/:id?

监听URL变化的实现机制

React Router深度整合了HTML5 History API来实现URL变化的监听和路由管理。具体实现可分为以下几个重要环节：

  1. 路由类型与监听机制

    • BrowserRouter ：使用标准的popstate事件监听，这是HTML5 History API提供的原生事件，当用户点击浏览器前进/后退按钮或调用history.back()等方法时会触发
    • HashRouter ：监听hashchange事件，主要用于不支持History API的旧浏览器或需要哈希路由的场景

  2. 事件触发后的处理流程

    • 当URL变化事件触发时，React Router会执行以下操作：
      1. 获取当前完整的URL路径
      2. 解析路径参数和查询字符串
      3. 与预定义的路由配置进行匹配
      4. 执行路由守卫逻辑（如存在）
      5. 触发重新渲染，加载匹配的组件

  3. 实际应用示例

    jsx 复制代码 
    // 当用户从/about导航到/contact时
history.push('/contact'); // 触发URL变更
// React Router会：
// 1. 捕获变化事件
// 2. 匹配/contact路径对应的组件
// 3. 卸载About组件
// 4. 渲染Contact组件

  4. 特殊场景处理

    • 动态路由参数变化：如从/users/1到/users/2，虽然路径模式相同但参数不同，仍会触发组件更新
    • 查询参数变化：如从/search?q=react到/search?q=router，可根据需要决定是否重新渲染

  5. 性能优化机制

    • 使用React的虚拟DOM进行高效比较
    • 支持路由组件的懒加载（React.lazy）
    • 提供shouldComponentUpdate等优化手段

这种监听机制使得React应用能够保持与URL的同步，同时确保了单页应用的流畅体验。开发者也可以通过useHistory、useLocation等Hook手动监听URL变化，实现更细粒度的控制。

React Router实践应用

基础路由配置

在React项目中使用React Router，首先需要通过npm或yarn安装react-router-dom库（建议安装v6或更高版本）。安装命令如下：

bash 复制代码 
npm install react-router-dom
# 或
yarn add react-router-dom

安装完成后，在项目的入口文件（通常是index.js或main.js）中进行路由配置。完整的配置示例如下：

javascript 复制代码 
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import App from './App';
import Home from './components/Home';
import About from './components/About';
import ErrorPage from './components/ErrorPage'; // 导入错误页面组件

// 创建路由配置
const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />, // 添加错误处理路由
    children: [
      {
        index: true, // 等同于path: "", 表示默认子路由
        element: <Home />
      },
      {
        path: "about",
        element: <About />,
        loader: () => fetch('/api/about'), // 添加路由加载器
        action: async ({ request }) => {   // 添加路由动作
          return await request.formData();
        }
      }
    ]
  }
], {
  basename: "/app" // 可选的基础路径配置
});

// 渲染应用
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

在这个示例中：

  1. 使用createBrowserRouter创建了一个浏览器历史路由
  2. 定义了根路径/对应<App>组件
  3. 添加了两个子路由：
    • 默认路径（index: true）对应<Home>组件
    • /about路径对应<About>组件
  4. 添加了错误处理路由errorElement
  5. 为about路由添加了数据加载器（loader）和表单处理动作（action）
  6. 可选配置了基础路径basename

在实际项目中，你还可以：

  • 使用<Link>组件进行导航
  • 通过useNavigate钩子进行编程式导航
  • 使用useParams获取路由参数
  • 通过useLoaderData访问加载的数据

动态路由详解

动态路由是前端路由系统中的重要功能，它允许在URL路径中嵌入参数，从而实现根据不同参数值渲染不同内容的效果。这种机制特别适用于需要展示动态内容的页面，比如用户详情、产品详情等场景。

工作原理

动态路由通过在路径定义中使用冒号(:)前缀来标识参数位置。当用户访问匹配的URL时，路由系统会自动提取这些参数值，并将其传递给对应的组件使用。

典型应用场景
  1. 用户管理系统：显示不同用户的详细信息页面
  2. 电商网站：展示不同商品的产品详情页
  3. 博客系统：加载不同文章的阅读页面
详细实现示例

以下是更完整的动态路由配置示例，包含错误处理和加载状态：

javascript 复制代码 
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />,  // 全局错误处理
    children: [
      {
        path: "",
        element: <Home />,
        loader: () => fetchInitialData()  // 数据预加载
      },
      {
        path: "user/:id",
        element: <User />,
        loader: ({ params }) => fetchUserData(params.id),  // 根据id加载用户数据
        errorElement: <UserError />  // 用户页专属错误处理
      }
    ]
  }
]);

function App() {
  return <RouterProvider router={router} />;
}
参数获取的完整示例

在组件中使用参数时，可以结合多种React Router提供的钩子：

javascript 复制代码 
import { useParams, useLoaderData, useNavigation } from 'react-router-dom';

function User() {
  const { id } = useParams();  // 获取URL参数
  const userData = useLoaderData();  // 获取loader加载的数据
  const navigation = useNavigation();  // 获取导航状态
  
  // 处理加载状态
  if (navigation.state === 'loading') {
    return <LoadingSpinner />;
  }

  // 渲染用户信息
  return (
    <div className="user-profile">
      <h2>用户ID: {id}</h2>
      <div className="user-info">
        <img src={userData.avatar} alt="用户头像"/>
        <p>用户名: {userData.username}</p>
        <p>注册时间: {userData.registerDate}</p>
      </div>
    </div>
  );
}
进阶用法
  1. 多参数路由 ：可以定义多个参数，如/product/:category/:id
  2. 可选参数 ：使用?标记可选参数，如/search/:query?
  3. 正则约束 ：可以对参数进行格式验证，如/user/:id(\\d+)只匹配数字ID

动态路由的这种灵活性使得前端应用能够高效地处理各种动态内容展示需求，同时保持代码的简洁性和可维护性。

嵌套路由

嵌套路由是React Router中一种强大的路由组织方式，它允许在一个Route组件内部定义子Route，实现组件级别的路由分层管理。这种设计模式特别适合具有层级结构的UI布局，比如后台管理系统、电商网站或内容详情页等场景。

典型应用场景

  1. 博客系统：文章详情页面可能包含多个子视图

    • /article/123/content 显示文章正文
    • /article/123/comments 显示评论区
    • /article/123/related 显示相关文章

  2. 管理后台：通常具有多级导航结构

    • /dashboard/users 用户管理
    • /dashboard/users/create 创建用户
    • /dashboard/users/:id/edit 编辑用户
详细配置示例

完整的嵌套路由配置通常包含以下要素：

javascript 复制代码 
const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,  // 根布局组件
    errorElement: <ErrorPage />,  // 错误边界
    children: [
      {
        index: true,  // 等同于path: ""
        element: <HomePage />
      },
      {
        path: "articles",
        element: <ArticlesLayout />,
        children: [
          {
            index: true,
            element: <ArticleList />
          },
          {
            path: ":id",
            element: <ArticleDetail />,
            loader: articleLoader,  // 数据预加载
            children: [
              {
                path: "content",
                element: <ArticleContent />,
                loader: contentLoader
              },
              {
                path: "comments",
                element: <ArticleComments />,
                loader: commentsLoader
              }
            ]
          }
        ]
      }
    ]
  }
]);
Outlet组件详解

Outlet是嵌套路由的核心组件，负责在父路由中渲染匹配的子路由内容。它有以下特点：

  • 必须放置在父组件中想要显示子内容的位置
  • 支持嵌套多层Outlet
  • 可以配合布局组件实现复杂UI结构

典型使用方式：

javascript 复制代码 
import { Outlet, useParams } from 'react-router-dom';

function ArticleDetail() {
  const { id } = useParams();
  
  return (
    <div className="article-container">
      <header>
        <h2>Article #{id}</h2>
        <nav>
          <Link to="content">Content</Link>
          <Link to="comments">Comments</Link>
        </nav>
      </header>
      
      {/* 子路由内容将在此处渲染 */}
      <div className="article-content">
        <Outlet />
      </div>
      
      <footer>Article Footer</footer>
    </div>
  );
}
进阶技巧

  1. 相对路径导航：在子路由组件中，Link的to属性可以使用相对路径

    javascript 复制代码 
    <Link to="../">返回上级</Link>
<Link to="comments">查看评论</Link>

  2. 默认子路由：可以通过index路由设置默认显示的子组件

    javascript 复制代码 
    {
  path: "article/:id",
  element: <Article />,
  children: [
    {
      index: true,
      element: <ArticleSummary />
    }
  ]
}

  3. 动态路由匹配：使用useMatch钩子获取当前嵌套路由的匹配信息

    javascript 复制代码 
    const match = useMatch("/article/:id/*");

路由守卫与权限控制的实现详解

路由守卫是前端权限控制系统中的重要环节，它能够在路由导航发生前执行验证逻辑，确保只有具备相应权限的用户才能访问特定页面。下面我们将详细解析如何实现路由守卫及权限控制。

完整实现步骤
  1. 创建路由配置
    首先需要定义应用的路由结构，其中包含公开路由和受保护路由：
javascript 复制代码 
import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
import App from './App';
import Home from './components/Home';
import Protected from './components/Protected';
import Login from './components/Login';
import Dashboard from './components/Dashboard';
  1. 实现认证状态检测
    通常我们会将登录状态存储在全局状态管理或本地存储中：
javascript 复制代码 
// 实际项目中可能使用Redux、Context API或Cookie存储登录状态
function checkAuth() {
  // 示例：检查本地存储的token
  return localStorage.getItem('authToken') !== null;
}
  1. 定义路由守卫组件
    可以创建高阶组件来处理路由保护逻辑：
javascript 复制代码 
function ProtectedRoute({ children }) {
  return checkAuth() ? children : <Navigate to="/login" replace />;
}
  1. 配置完整路由
    在路由配置中应用守卫逻辑：
javascript 复制代码 
const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      { index: true, element: <Home /> },
      { path: "login", element: <Login /> },
      { 
        path: "dashboard",
        element: <ProtectedRoute><Dashboard /></ProtectedRoute>
      },
      {
        path: "admin",
        element: checkAuth() && isAdmin() ? <AdminPanel /> : <Navigate to="/" />
      }
    ]
  },
  // 404处理
  { path: "*", element: <NotFound /> }
]);
  1. 渲染路由
    最后将路由注入应用：
javascript 复制代码 
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);
实际应用场景
  1. 多角色权限控制
javascript 复制代码 
// 根据用户角色显示不同内容
function AdminRoute({ children }) {
  return isAdmin() ? children : <Navigate to="/forbidden" />;
}
  1. 路由拦截示例
    当未登录用户尝试访问受保护路由时：
javascript 复制代码 
// 在登录成功后重定向回原始请求页面
const location = useLocation();
<Navigate to="/login" state={{ from: location }} replace />
  1. 全局前置守卫
    可以在路由配置前统一设置：
javascript 复制代码 
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

通过这种方式，我们可以构建完整的权限控制系统，包括：

  • 基于角色的访问控制
  • 登录状态验证
  • 路由级权限校验
  • 未授权访问重定向

这种模式适用于各种需要权限控制的前端应用，如后台管理系统、会员中心等。实际项目中还可以结合JWT、OAuth等认证方案进行更安全的实现。

总结

React Router通过Router、Route、Link和History等核心概念，结合URL解析、路径匹配、组件渲染和监听URL变化等机制，实现了强大而灵活的路由功能。在实际项目中，合理配置基础路由、运用动态路由和嵌套路由，以及实现路由守卫与权限控制，能够构建出高效、易用的单页应用。掌握React Router的路由原理与实践技巧，是前端开发者必备的技能之一，有助于提升项目的开发效率和用户体验。

如果你在实际应用React Router时遇到特定难题，比如复杂嵌套路由的优化，或是权限控制逻辑的完善，欢迎分享，我们可以进一步探讨解决方案。

📌 下期预告 ：Vue3响应式原理与API

❤️❤️❤️：如果你觉得这篇文章对你有帮助，欢迎点赞、关注本专栏！后续解锁更多功能，敬请期待！👍🏻 👍🏻 👍🏻

相关推荐
＆白帝＆42 分钟前
前端实现截图的几种方法
前端
动能小子ohhh1 小时前
html实现登录与注册功能案例（不写死且只使用js）
开发语言·前端·javascript·python·html
小小小小宇1 小时前
大文件断点续传笔记
前端
Jimmy2 小时前
理解 React Context API: 实用指南
前端·javascript·react.js
保持学习ing2 小时前
SpringBoot电脑商城项目--显示勾选+确认订单页收货地址
java·前端·spring boot·后端·交互·jquery
李明一.2 小时前
Java 全栈开发学习：从后端基石到前端灵动的成长之路
java·前端·学习
观默3 小时前
我用AI造了个“懂我家娃”的育儿助手
前端·人工智能·产品
crary,记忆3 小时前
微前端MFE：(React 与 Angular)框架之间的通信方式
前端·javascript·学习·react.js·angular
星空寻流年3 小时前
javaScirpt学习第七章(数组)-第一部分
前端·javascript·学习
巴巴_羊4 小时前
React JSX语法
javascript·react.js·ecmascript
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解03Coze扣子平台完整体验和实践（附国内和国际版对比）0438、基于卷积神经网络(CNN)的车牌自动识别系统(matlab)05DeepSeek各版本说明与优缺点分析06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07C# 项目：导线计算 / 坐标转换 / 曲线放样 / 水准网 / 导线网平差08AI Agent | Coze 插件使用指南：从功能解析到实操步骤09YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】10jdk21下载、安装（Windows、Linux、macOS）