القائمة
Master React Router v6 for production routing with error boundaries, lazy loading, and navigation guards
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-react --skill react-routerيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Build production-grade, accessible, and tested component libraries with Storybook, Chromatic, and design tokens
Build production-grade React apps with Next.js 14 App Router, Server Components, and Edge Runtime
Master React Hooks including useState, useEffect, useContext, useReducer, and custom hooks with production-grade patterns
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | react-router |
| description | Master React Router v6 for production routing with error boundaries, lazy loading, and navigation guards |
| sasmp_version | 2.0.0 |
| bonded_agent | 05-routing-navigation |
| bond_type | PRIMARY_BOND |
| input_validation | {"required_packages":[{"react-router-dom":">=6.0.0"}]} |
| output_format | {"code_examples":"jsx","test_template":"jest"} |
| error_handling | {"patterns":["error_boundary","lazy_retry","404_fallback"]} |
| observability | {"logging":"structured","metrics":["navigation_count","route_load_time"]} |
Master React Router v6 for building single-page applications with client-side routing, including nested routes, protected routes, and navigation patterns.
npm install react-router-dom
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/users/:userId" element={<UserProfile />} />
<Route path="*" element={<NotFound />} />
</Routes>
</>
);
}
import { Link, NavLink } from 'react-router-dom';
function Nav() {
return (
<nav>
<Link to="/">Home</Link>
<NavLink to="/about" className={({ isActive }) => isActive ? 'active' : ''}>
About
</NavLink>
</nav>
);
}
import { useNavigate } from 'react-router-dom';
function LoginForm() {
const navigate = useNavigate();
const handleSubmit = async (credentials) => {
await login(credentials);
navigate('/dashboard'); // Navigate after login
// navigate(-1); // Go back
// navigate('/home', { replace: true }); // Replace history
};
return <form onSubmit={handleSubmit}>...</form>;
}
import { useParams } from 'react-router-dom';
// Route: /users/:userId
function UserProfile() {
const { userId } = useParams();
return <div>User ID: {userId}</div>;
}
// Multiple params: /posts/:postId/comments/:commentId
function Comment() {
const { postId, commentId } = useParams();
// ...
}
import { useSearchParams } from 'react-router-dom';
function ProductList() {
const [searchParams, setSearchParams] = useSearchParams();
const category = searchParams.get('category') || 'all';
const sort = searchParams.get('sort') || 'name';
const updateCategory = (newCategory) => {
setSearchParams({ category: newCategory, sort });
};
return (
<div>
{/* URL: /products?category=electronics&sort=price */}
<select value={category} onChange={(e) => updateCategory(e.target.value)}>
<option value="all">All</option>
<option value="electronics">Electronics</option>
</select>
</div>
);
}
import { Outlet } from 'react-router-dom';
function DashboardLayout() {
return (
<div>
<DashboardNav />
<main>
<Outlet /> {/* Child routes render here */}
</main>
</div>
);
}
// Route configuration
<Route path="/dashboard" element={<DashboardLayout />}>
<Route index element={<DashboardHome />} />
<Route path="profile" element={<Profile />} />
<Route path="settings" element={<Settings />} />
</Route>
import { Navigate, useLocation } from 'react-router-dom';
function ProtectedRoute({ children }) {
const { user } = useAuth();
const location = useLocation();
if (!user) {
return <Navigate to="/login" state={{ from: location }} replace />;
}
return children;
}
// Usage
<Route
path="/dashboard"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>
import { lazy, Suspense } from 'react';
const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
function App() {
return (
<Suspense fallback={<Spinner />}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</Suspense>
);
}
import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
function RouteErrorBoundary() {
const error = useRouteError();
if (isRouteErrorResponse(error)) {
if (error.status === 404) {
return <NotFoundPage />;
}
return <ErrorPage status={error.status} message={error.statusText} />;
}
return <ErrorPage message="Something went wrong" />;
}
// Router configuration with error handling
const router = createBrowserRouter([
{
path: '/',
element: <RootLayout />,
errorElement: <RouteErrorBoundary />,
children: [/* routes */],
},
]);
function lazyWithRetry(importFn, retries = 3) {
return lazy(async () => {
for (let i = 0; i < retries; i++) {
try {
return await importFn();
} catch (err) {
if (i === retries - 1) throw err;
await new Promise(r => setTimeout(r, 1000 * Math.pow(2, i)));
}
}
});
}
const Dashboard = lazyWithRetry(() => import('./Dashboard'));
import { render, screen } from '@testing-library/react';
import { MemoryRouter, Routes, Route } from 'react-router-dom';
describe('Routing', () => {
it('renders correct route', () => {
render(
<MemoryRouter initialEntries={['/dashboard']}>
<Routes>
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</MemoryRouter>
);
expect(screen.getByText(/dashboard/i)).toBeInTheDocument();
});
});
Version: 2.0.0 Last Updated: 2025-12-30 SASMP Version: 2.0.0 Difficulty: Intermediate Estimated Time: 1-2 weeks Prerequisites: React Fundamentals Changelog: Added error boundaries, lazy retry, and test templates