frontend-routing by aj-geddes/useful-ai-prompts
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill frontend-routing为多页面单页应用实现客户端路由,包含导航、懒加载、受保护路由和状态管理功能。
最小工作示例:
// 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 = () => {
// ... (完整实现请参阅参考指南)
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
references/ 目录下的详细实现:
| 指南 | 内容 |
|---|---|
| React Router v6 | React Router v6 |
| Vue Router 4 | Vue Router 4 |
| Angular Routing | Angular Routing |
| Query Parameter Handling | 查询参数处理 |
| Route Transition Effects | 路由过渡效果 |
每周安装量
112
代码仓库
GitHub 星标数
126
首次出现
2026年1月21日
安全审计
已安装于
opencode94
gemini-cli92
codex89
claude-code86
cursor84
github-copilot75
Implement client-side routing with navigation, lazy loading, protected routes, and state management for multi-page single-page applications.
Minimal working example:
// 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)
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| React Router v6 | React Router v6 |
| Vue Router 4 | Vue Router 4 |
| Angular Routing | Angular Routing |
| Query Parameter Handling | Query Parameter Handling |
| Route Transition Effects | Route Transition Effects |
Weekly Installs
112
Repository
GitHub Stars
126
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode94
gemini-cli92
codex89
claude-code86
cursor84
github-copilot75
Nuxt 4 模式指南:SSR、混合渲染、路由规则与数据获取最佳实践
733 周安装