روتینگ با React Router

استفاده از useNavigate و useParams

useNavigate

برای ریدایرکت یا ناوبری برنامه‌نویسی‌شده:

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
navigate("/dashboard");

useParams

برای گرفتن پارامترهای مسیر:

} />
// در داخل کامپوننت Product
const { id } = useParams();

Nested Routes (مسیرهای تو در تو)

برای ساخت مسیرهای داخل یک صفحه (مثلاً تب‌ها یا صفحات فرعی):

}>
 } />
 } />

و در Dashboard.jsx:

Outlet جایی است که محتوای فرزند نمایش داده می‌شود.

Redirect و Navigate

برای هدایت کاربر به مسیر جدید (مثلاً پس از لاگین موفق):

import { Navigate } from "react-router-dom";
if (!isLoggedIn) {
 return ;
}

جایگزین Redirect در نسخه‌های جدید React Router است.

محافظت از مسیرها (Protected Routes)

برای محدود کردن دسترسی به برخی صفحات (مثلاً فقط کاربران لاگین‌شده):

function ProtectedRoute({ children }) {
 const isAuth = useAuth();
 return isAuth ? children : ;
}

و استفاده:

 path="/dashboard"
 element={
 
 
 
 }
/>

جمع‌بندی

در این فصل یاد گرفتیم که چطور با استفاده از React Router مسیرها و لینک‌ها را تعریف کنیم، از پارامترها و مسیرهای تو در تو استفاده کنیم، کاربر را برنامه‌نویسی‌شده منتقل کنیم و مسیرها را در برابر دسترسی‌های غیرمجاز محافظت کنیم.