vite react router（建议收藏）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言：为什么选择 Vite + React Router 组合？

在现代前端开发领域，构建高效、灵活的应用框架是开发者的核心诉求。Vite 作为新一代前端构建工具，凭借其闪电般的开发速度和开箱即用的特性，迅速成为开发者的新宠。而 React Router 作为 React 生态中最成熟的路由解决方案，能够完美适配单页应用（SPA）的复杂导航需求。本文将从零开始，通过实际案例演示如何使用 Vite + React Router 快速搭建一个现代化的前端应用。

一、环境搭建：3 分钟启动开发环境

1.1 Vite 的快速启动

与传统构建工具相比，Vite 的优势在于无需打包即可实现即时编译。它的核心原理是通过 ES 模块原生支持，将开发服务器直接提供模块化的 JavaScript 文件，从而实现毫秒级的冷启动和热更新。

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

这里通过一条命令即可完成项目初始化，Vite 默认配置已经包含了 React、TypeScript、CSS 预处理器等常见开发需求。

1.2 安装 React Router

接下来需要安装 React Router 的最新版本（v6.x）：

npm install react-router-dom@6

注意：React Router v6 对 API 进行了重大重构，包括路由配置方式、钩子函数命名等均有变化，需特别注意文档版本对应性。

二、基础路由配置：构建导航系统

2.1 路由基础结构

在 src 目录下创建 App.tsx 文件，引入 React Router 的核心组件：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

这里将整个应用包裹在 <BrowserRouter> 组件中，通过 <Routes> 定义路由规则，每个 <Route> 对象对应一个页面路径。

2.2 导航组件实现

创建 components 文件夹存放页面组件：

// Home.jsx
export default function Home() {
  return <h1>欢迎来到首页</h1>;
}

// About.jsx
export default function About() {
  return <h1>关于我们页面</h1>;
}

// Contact.jsx
export default function Contact() {
  return <h1>联系我们页面</h1>;
}

通过简单的组件拆分，我们已经实现了三个基础页面的导航功能。

2.3 链接组件跳转

在 Header 组件中添加导航链接：

import { Link } from 'react-router-dom';

function Header() {
  return (
    <nav>
      <Link to="/">首页</Link>
      <Link to="/about">关于</Link>
      <Link to="/contact">联系</Link>
    </nav>
  );
}

<Link> 组件替代传统 <a> 标签，实现无刷新页面跳转，提升用户体验。

三、动态路由与参数捕获：构建灵活的 URL 结构

3.1 动态路径匹配

假设需要实现用户资料页面，路径格式为 /users/:id：

<Route path="/users/:id" element={<UserProfile />} />

:id 是路径参数占位符，React Router 会自动将参数值传递给组件。

3.2 参数解构与使用

在 UserProfile 组件中获取参数值：

import { useParams } from 'react-router-dom';

function UserProfile() {
  const { id } = useParams();
  return <div>用户ID：{id}</div>;
}

useParams() 钩子返回包含路径参数的对象，通过解构可以直接使用。

3.3 嵌套路由示例

构建包含子路由的管理后台结构：

<Route path="/admin" element={<AdminLayout />}>
  <Route index element={<Dashboard />} />
  <Route path="users" element={<UserList />} />
  <Route path="products" element={<ProductList />} />
</Route>

父路由 <AdminLayout> 作为布局容器，子路由通过嵌套方式定义，实现模块化管理。

四、导航钩子与状态管理：增强路由功能

4.1 使用 useNavigate 控制跳转

在表单提交成功后跳转页面：

import { useNavigate } from 'react-router-dom';

function LoginForm() {
  const navigate = useNavigate();
  const handleSubmit = () => {
    navigate('/dashboard');
  };
  return <form onSubmit={handleSubmit}>...</form>;
}

useNavigate 替代了 v5 版本的 useHistory，提供更直观的 API。

4.2 路由守卫实现

通过 useEffect 实现登录验证：

import { useLocation, useNavigate } from 'react-router-dom';

function ProtectedRoute({ children }) {
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    if (!isLoggedIn) {
      navigate('/login', { replace: true, state: { from: location } });
    }
  }, [isLoggedIn]);

  return children;
}

该组件可以包裹需要保护的路由，实现权限验证逻辑。

五、代码分割与性能优化：提升应用加载速度

5.1 懒加载组件

通过 React.lazy 和 Suspense 实现动态加载：

const Dashboard = React.lazy(() => import('./Dashboard'));

<Route
  path="/dashboard"
  element={
    <Suspense fallback={<div>加载中...</div>}>
      <Dashboard />
    </Suspense>
  }
/>

该方式会将组件拆分为独立的代码块，按需加载，显著减少初始包体积。

5.2 路由预加载

在导航时预加载即将访问的路由：

<Link
  to="/about"
  onClick={() => {
    preloadRoute("/about");
  }}
>
  About
</Link>

通过自定义预加载逻辑，可以提前加载目标路由的资源，改善用户体验。

六、进阶技巧：构建企业级应用

6.1 自定义 404 页面

通过 * 通配符处理未匹配路由：

<Route path="*" element={<NotFound />} />

将该路由放在最后，确保只有在其他路由均未匹配时触发。

6.2 路由状态管理

结合 React Context 实现路由状态共享：

const RouterContext = createContext();

function RouterProvider({ children }) {
  const [routeState, setRouteState] = useState({});
  return (
    <RouterContext.Provider value={{ routeState, setRouteState }}>
      {children}
    </RouterContext.Provider>
  );
}

该模式适用于需要跨组件共享路由相关信息的复杂场景。

6.3 API 路由整合

配合 Vite 的代理配置实现 API 路由：

在 vite.config.js 中添加：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

这样可以在前端直接通过 /api/endpoint 访问后端服务，无需处理跨域问题。

七、实战案例：电商应用路由设计

7.1 商品分类路由

<Route path="/products" element={<ProductLayout />}>
  <Route index element={<ProductList />} />
  <Route path=":category" element={<CategoryPage />} />
  <Route path=":category/:productId" element={<ProductDetail />} />
</Route>

通过多级路径参数实现商品分类到详情页的导航。

7.2 购物车与结算流程

<Route path="/cart" element={<Cart />}>
  <Route path="checkout" element={<Checkout />} />
  <Route path="payment" element={<Payment />} />
</Route>

嵌套路由可以清晰表达购物车与结算流程的层级关系。

八、常见问题与解决方案

8.1 路由跳转后组件未更新

检查是否正确使用 key 属性触发组件重新渲染：

<Route
  path="/user/:id"
  element={<UserProfile key={id} />}
/>

8.2 开发环境性能问题

通过以下配置优化 Vite 开发体验：

// vite.config.js
optimizeDeps: {
  exclude: ['react', 'react-dom'],
  entries: ['src/main.jsx']
}

8.3 生产环境构建优化

使用以下命令进行生产构建：

npm run build -- --report

添加 --report 参数可以生成构建分析报告，帮助定位性能瓶颈。

结论：构建更高效的开发流程

通过本文的逐步实践，我们构建了一个具备完整导航功能的现代化前端应用。Vite 的快速构建能力和 React Router 的灵活路由系统，为开发者提供了极佳的开发体验。对于进阶开发者，可以进一步探索以下方向：

1. 集成状态管理方案（如 Redux）
2. 实现国际化路由（i18n）
3. 开发自定义路由中间件
4. 实现服务端渲染（SSR）与静态生成（SSG）

未来随着 React 18 的 Suspense for Data 特性成熟，Vite + React Router 的组合将在数据获取与路由整合方面展现更大的潜力。建议开发者持续关注 React Router v6 的新特性，同时结合项目需求选择最适合的路由策略。

本文通过系统化的实践案例，帮助开发者掌握 Vite + React Router 的核心用法，为构建复杂单页应用打下坚实基础。持续学习和实践是掌握现代前端技术的关键，期待读者能在实际项目中发挥这些技术方案的最大价值。