در حال بارگذاری...

React Router

React Router در ری‌اکت (React) یک کتابخانه کلیدی برای مدیریت ناوبری در برنامه‌های تک‌صفحه‌ای (SPA) است. این ابزار به توسعه‌دهندگان اجازه می‌دهد مسیرهای URL را تعریف کرده و آن‌ها را به کامپوننت‌های ری‌اکت مرتبط کنند، بدون اینکه صفحه به‌طور کامل دوباره بارگذاری شود. این قابلیت باعث بهبود تجربه کاربری، کاهش بار روی سرور و ساختارمند شدن کد می‌شود.
استفاده از React Router زمانی ضروری است که یک برنامه شامل چندین صفحه یا نما باشد. این کتابخانه با مفاهیم پایه‌ای ری‌اکت مانند کامپوننت‌ها، مدیریت state، جریان داده و چرخه عمر کامپوننت‌ها یکپارچه می‌شود. React Router کمک می‌کند تا Prop Drilling کاهش یابد، از رندرهای غیرضروری جلوگیری شود و کامپوننت‌ها بر اساس بهترین شیوه‌های ری‌اکت طراحی شوند.
در این آموزش، خوانندگان با ایجاد مسیرهای استاتیک و داینامیک، استفاده از کامپوننت Link برای ناوبری، خواندن پارامترهای URL با useParams، و پیاده‌سازی مسیرهای محافظت‌شده با ProtectedRoute آشنا خواهند شد. همچنین، مدیریت state و یکپارچه‌سازی با چرخه عمر کامپوننت‌ها به‌صورت عملی نشان داده می‌شود و مثال‌ها به گونه‌ای طراحی شده‌اند که بتوانند مستقیماً در پروژه‌های واقعی ری‌اکت استفاده شوند.

مثال پایه

jsx

JSX Code

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function Home() {
return <h2>صفحه اصلی</h2>;
}

function About() {
return <h2>درباره ما</h2>;
}

function App() {
return ( <Router> <nav> <Link to="/">خانه</Link> | <Link to="/about">درباره ما</Link> </nav> <Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} /> </Routes> </Router>
);
}

export default App;

در مثال بالا، BrowserRouter کل برنامه را در زمینه ناوبری قرار می‌دهد. Routes تمام تعاریف مسیرها را در خود نگه می‌دارد و Route مسیرهای URL را به کامپوننت‌های مشخص شده متصل می‌کند. استفاده از Link به جای تگ باعث می‌شود که بدون بارگذاری مجدد صفحه، ناوبری انجام شود و state حفظ شود.
کامپوننت‌های Home و About به صورت تابعی طراحی شده‌اند و نشان‌دهنده تفکیک مسئولیت و طراحی کامپوننت‌بیس در ری‌اکت هستند. این مثال مفاهیم کلیدی React Router را نمایش می‌دهد: مسیریابی کامپوننت‌بیس، تعریف مسیرها به شکل دیکلاریتیو و مدیریت state بدون رندرهای غیرضروری. این ساختار پایه‌ای محکم برای SPAها فراهم می‌کند.

مثال کاربردی

jsx

JSX Code

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useParams, Navigate } from 'react-router-dom';

function Dashboard() {
const [user, setUser] = useState(null);

useEffect(() => {
setTimeout(() => setUser({ name: 'Mamad', role: 'admin' }), 1000);
}, []);

if (!user) return <p>در حال بارگذاری...</p>;

return <h2>خوش آمدید {user.name} به داشبورد</h2>;
}

function Profile() {
const { username } = useParams();
return <h2>پروفایل کاربر: {username}</h2>;
}

function ProtectedRoute({ children }) {
const isAuthenticated = true;
return isAuthenticated ? children : <Navigate to="/" />;
}

function App() {
return ( <Router> <nav> <Link to="/">خانه</Link> | <Link to="/dashboard">داشبورد</Link> | <Link to="/profile/Mamad">پروفایل</Link> </nav> <Routes>
<Route path="/" element={<h2>صفحه اصلی</h2>} />
<Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
<Route path="/profile/:username" element={<Profile />} /> </Routes> </Router>
);
}

export default App;

در این مثال پیشرفته، Dashboard با استفاده از useState و useEffect داده‌ها را به صورت غیرهمزمان بارگذاری می‌کند و مدیریت چرخه عمر را نشان می‌دهد. کامپوننت Profile با استفاده از useParams پارامترهای URL را می‌خواند و Prop Drilling را کاهش می‌دهد.
ProtectedRoute مسیرهای حساس را محافظت می‌کند و کاربران غیرمجاز را با Navigate به مسیر اصلی هدایت می‌کند. این ساختار با اصول ری‌اکت هم‌راستا است، کامپوننت‌های قابل استفاده مجدد ایجاد می‌کند و بهینه‌سازی عملکرد را تضمین می‌کند.

بهترین شیوه‌ها در استفاده از React Router شامل طراحی کامپوننت‌های قابل استفاده مجدد، مدیریت بهینه state، استفاده از مسیرهای داینامیک و یکپارچه‌سازی با چرخه عمر کامپوننت‌هاست. از اشتباهات رایج مانند تغییر مستقیم state، Prop Drilling زیاد و رندرهای غیرضروری اجتناب کنید. برای رفع اشکال، از React DevTools استفاده کنید. بهینه‌سازی عملکرد با React.memo و useCallback امکان‌پذیر است و برای کامپوننت‌های بزرگ Lazy Loading و Suspense پیشنهاد می‌شود. مسیرهای حساس باید از طریق مکانیزم‌های احراز هویت محافظت شوند.

📊 جدول مرجع

ری‌اکت (React) Element/Concept	Description	Usage Example
BrowserRouter	زمینه ناوبری کل برنامه را فراهم می‌کند	<BrowserRouter><App /></BrowserRouter>
Routes	تمام مسیرها را نگه می‌دارد	<Routes><Route path="/" element={<Home />} /></Routes>
Route	مسیر URL را به کامپوننت متصل می‌کند	<Route path="/about" element={<About />} />
Link	برای ناوبری بدون بارگذاری مجدد صفحه	<Link to="/about">درباره ما</Link>
useParams	خواندن پارامترهای داینامیک URL	const { id } = useParams();
Navigate	ریدایرکت برنامه‌نویسی شده	<Navigate to="/login" />

React Router یک راهکار کامپوننت‌بیس و دیکلاریتیو برای مسیریابی در SPAها فراهم می‌کند. یادگیری آن مدیریت مسیرهای استاتیک و داینامیک، ایجاد مسیرهای محافظت‌شده و یکپارچه‌سازی با state و چرخه عمر کامپوننت‌ها را تسهیل می‌کند. برای ادامه، مطالعه Hooks پیشرفته، Lazy Loading، یکپارچه‌سازی با Context API یا Redux و بهینه‌سازی عملکرد پیشنهاد می‌شود. تمرین عملی روی پروژه‌های واقعی، مهارت‌های شما را تثبیت می‌کند.