frontend-routing

前端路由

目录

• 概述
• 适用场景
• 快速开始
• 参考指南
• 最佳实践

概述

为多页面单页应用实现客户端路由，支持导航、延迟加载、受保护路由和状态管理。

适用场景

• 多页面导航
• 基于 URL 的状态管理
• 受保护／守卫路由
• 组件延迟加载
• 查询参数处理

快速开始

最简可运行示例：

// App.tsx
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { Layout } from './components/Layout';
import { Home } from './pages/Home';
import { NotFound } from './pages/NotFound';
import { useAuth } from './hooks/useAuth';
import React from 'react';

// Lazy loaded components
const Dashboard = React.lazy(() => import('./pages/Dashboard'));
const UserProfile = React.lazy(() => import('./pages/UserProfile'));
const Settings = React.lazy(() => import('./pages/Settings'));

// Protected route wrapper
const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  return <>{children}</>;
};

export const App: React.FC = () => {
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南	内容
React Router v6	React Router v6
Vue Router 4	Vue Router 4
Angular Routing	Angular 路由
Query Parameter Handling	查询参数处理
Route Transition Effects	路由切换效果

最佳实践

✅ 应该做

• 遵循既定模式和约定
• 编写整洁、易维护的代码
• 添加适当的文档
• 部署前进行全面测试

❌ 不应该做

• 跳过测试或验证
• 忽略错误处理
• 将配置值硬编码