476 0136 0922

react-Router-dom در ریکت چیست؟

react-Router-dom در ریکت چیست؟

react-Router-dom در ریکت چیست؟

react-Router-dom در ریکت چیست؟ در دنیای امروزی که وب بسیار توسعه‌ یافته، ساخت اپلیکیشن‌های تک‌ صفحه‌ای (SPA) با React به یک استاندارد تبدیل شده است. اما مدیریت کردن این مسیرها (Routing) در چنین برنامه‌هایی یکی از چالش‌های مهم به شمار می‌آید. اینجاست که لازم می شود، بزار قدرتمندی مثل  React Router DOM وارد شود.

در این مقاله با این کتابخانه‌ی پرکاربرد آشنا می‌شویم، نحوه‌ی نصب و استفاده از آن را یاد می‌گیریم و با مثال‌های کاربردی، مفاهیم آن را به‌صورت عملی بررسی می‌کنیم.

برای یادگیری و راهنمایی بیشتر بهتر است به آموزش برنامه نویسی در کرج سر بزنید.

جاوا در react-Router-dom در ریکت چیست؟

✅ React Router DOM چیست و چرا اهمیت دارد؟

در قدم اول بهتر است با این کتابخانه پرکاربرد آشنا شویم تا بهتر بتوانیم مطالب را درک کنیم. برخلاف وب‌سایت‌های سنتی که هر صفحه HTML جداگانه‌ای دارد، در اپلیکیشن‌های SPA فقط یک فایل HTML بارگذاری می‌شود و بقیه محتوا از طریق جاوا اسکریپت و بدون رفرش صفحه مدیریت می‌شود.

حالا React Router DOM به ما این امکان را می‌دهد که:

  • برای آدرس‌های مختلف، به کامپوننت‌های مختلف نمایش دهیم

  • بدون بارگذاری مجدد، بین صفحات به راحتی جابه‌جا شویم

  • بتوانیم مسیرهای داینامیک و محافظت‌شده ایجاد کنیم

  • و از همه مهمتر، بتوانیم تجربه کاربری حرفه‌ای‌تری بسازیم

✅نصب و راه‌اندازی React Router DOM

برای شروع استفاده از React Router DOM در پروژه‌ی React، ابتدا باید کتابخانه را به پروژه اضافه کنیم: این کار به‌سادگی با استفاده از npm یا yarn قابل انجام است.

  • نصب با npm:
npm install react-router-dom
  • نصب با yarn:
yarn add react-router-dom

پس از نصب، باید در فایل اصلی پروژه (معمولاً App.js یا App.tsx) از کامپوننت BrowserRouter برای فعال‌سازی سیستم مسیریابی استفاده کنیم. این کامپوننت مانند یک ظرف عمل می‌کند که مسیرها را مدیریت می‌کند.

✅ ساختار اولیه پروژه پس از راه‌اندازی:

// App.js

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);

}

export default App;

در مثال بالا:

  • BrowserRouter، پایه و اساس سیستم مسیریابی است.

  • Routes، مجموعه‌ای از مسیرهای مختلف را نگه‌ می‌دارد.

  • Route، مسیر خاصی را تعریف می‌کند که با یک آدرس (path) و یک کامپوننت (element) مشخص می‌شود.

با این راه‌اندازی ساده، اپلیکیشن آماده‌ی پشتیبانی از چند صفحه‌ی مجازی خواهد بود.

✅ معرفی مفاهیم کلیدی در React Router DOM

پس از نصب و راه‌اندازی، برای استفاده مؤثر از React Router DOM باید با مفاهیم پایه‌ای آن آشنا شویم. در این بخش مهم‌ترین کامپوننت‌ها و هوک‌هایی را بررسی می‌کنیم که در مدیریت مسیرها در React استفاده می‌شوند.

1. BrowserRouter

این کامپوننت ریشه‌ی سیستم مسیریابی در برنامه است. باید همه‌ی مسیرها درون این کامپوننت قرار بگیرند. از BrowserRouter برای اپلیکیشن‌هایی استفاده می‌شود که از تاریخچه‌ی مرورگر (history API) استفاده می‌کنند.

import { BrowserRouter } from 'react-router-dom';

<BrowserRouter>
{/* سایر مسیرها در اینجا قرار می‌گیرند */}
</BrowserRouter>

2. Routes و Route

  • Routes شامل مجموعه‌ای از مسیرهاست.

  • هر Route یک مسیر خاص را تعریف می‌کند که با یک آدرس (path) و کامپوننت (element) مشخص می‌شود.

<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>

3. Link و NavLink

برای جابجایی بین صفحات در React Router نباید از تگ‌های <a> معمولی استفاده کنیم، چون باعث رفرش کل صفحه می‌شوند. به جای آن، از Link یا NavLink استفاده می‌کنیم:

import { Link } from 'react-router-dom';

<Link to=“/about”>درباره ما</Link>

NavLink مانند Link عمل می‌کند ولی به ما اجازه می‌دهد که لینک فعال (active) را استایل‌دهی کنیم:

import { NavLink } from 'react-router-dom';

<NavLink to=“/about” className={({ isActive }) => isActive ? “active” : “”}>
درباره ما
</NavLink>

4. useNavigate

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

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
navigate(‘/dashboard’);

5. useParams

برای دسترسی به پارامترهایی که در مسیر تعریف شده‌اند (مثل /user/:id) از این هوک استفاده می‌شود:

import { useParams } from 'react-router-dom';

const { id } = useParams();

پروژه نمونه با سه صفحه ساده ✅

در این بخش، یک پروژه ساده با سه صفحه ایجاد می‌کنیم: صفحه اصلی (Home)، درباره ما (About)، و تماس با ما (Contact). در ادامه، مسیرها را تعریف می‌کنیم و از Link برای جابجایی بین آن‌ها استفاده می‌کنیم.

:ساختار فایل‌ها


src/
├── App.js
└── pages/
├── Home.js
├── About.js
└── Contact.js

:محتوای فایل‌ها

Home.js

const Home = () => <h1>صفحه اصلی</h1>;
export default Home;

About.js

const About = () => {
return <h1>درباره ما</h1>;
};

Contact.js

const Contact = () => {
return <h1>تماس با ما</h1>;
};

 

3. پیاده‌سازی مسیرها در App.js

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
function App() {
return (
<BrowserRouter>
<nav>
<ul>
<li><Link to="/">خانه</Link></li>
<li><Link to="/about">درباره ما</Link></li>
<li><Link to="/contact">تماس با ما</Link></li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</BrowserRouter>
);

}

export default App;

در مقاله بعدی، با مسیرهای داینامیک آشنا خواهیم شد که یکی از قابلیت‌های مهم React Router است.

✅ جمع‌بندی

در این مقاله با یکی از مهم‌ترین ابزارهای مسیر‌یابی در اپلیکیشن‌های React آشنا شدیم: React Router DOM این کتابخانه به ما امکان می‌دهد تا در برنامه‌های تک‌صفحه‌ای (SPA) به سادگی مسیرهای مختلف را تعریف و مدیریت کنیم.

در طول مقاله با مفاهیم کلیدی مانند:

  • BrowserRouter، Routes و Route

  • لینک‌ها با Link و NavLink

  • مسیرهای داینامیک با useParams

  • ناوبری برنامه‌محور با useNavigate

  • و نمایش صفحات خطا با مسیر wildcard (*)

آشنا شدیم و هر کدام را با مثال عملی بررسی کردیم.

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

تصویر آناهیتا شمس

آناهیتا شمس

فهرست مطالب

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آموزشکده دات کام

آموزشکده دات کام، فعالیت خود را از سال ۱۳۹۵ آغاز کرده و با بیش از صدها فارغ‌التحصیل در استان البرز، به عنوان مرکزی معتبر در آموزش مهارت‌ها شناخته می‌شود. این مجموعه با بهره‌گیری از کادری مجرب که علاوه بر تحصیلات آکادمیک، در صنعت و هنر نیز فعال هستند، آخرین روش‌های آموزشی را ارائه می‌دهد. دپارتمان‌های مختلف آموزش با تیم علمی تخصصی، تجربیات خود را به هنرآموزان منتقل می‌کنند و کلاس‌ها به صورت جلسات ۹۰ دقیقه‌ای برگزار می‌شوند.

آخرین مقالات

نماد اعتماد

تمامی حقوق محفوظ است