logo amoozeshkadeh
جستجو
این کادر جستجو را ببندید.
react-router-dom

react-router-dom

 

react-router-dom در React چیست؟

مقدمه

در دنیای توسعه وب، استفاده از فریم‌ورک‌ها و کتابخانه‌هایی مانند React بسیار رایج شده است. React یکی از محبوب‌ترین کتابخانه‌های جاوااسکریپت برای ساخت رابط کاربری (UI) است که توسط فیسبوک توسعه یافته است. یکی از ویژگی‌های کلیدی React این است که برنامه‌ها به صورت تک‌صفحه‌ای (SPA) ساخته می‌شوند، به این معنی که کاربر بدون بارگذاری مجدد صفحه می‌تواند بین بخش‌های مختلف اپلیکیشن جابجا شود. برای مدیریت مسیرها در این اپلیکیشن‌ها، React Router DOM به کمک آمده و ناوبری میان صفحات مختلف را آسان می‌کند.

اما این نوع معماری یک چالش مهم دارد: مدیریت مسیرها (Routing). در یک برنامه‌ی سنتی مبتنی بر چند صفحه، آدرس هر صفحه در مرورگر منجر به بارگذاری یک فایل HTML جدید می‌شود. اما در اپلیکیشن‌های SPA، باید بتوان بدون بارگذاری مجدد، بر اساس URL فعلی، محتوای مناسب را به کاربر نمایش داد. اینجاست که کتابخانه‌ای مانند React Router DOM به کمک ما می‌آید.

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

در این مقاله، با نحوه‌ی نصب، استفاده، و پیاده‌سازی React Router DOM در پروژه‌های React آشنا می‌شویم. همچنین مثال‌های عملی برای درک بهتر مفاهیم ارائه خواهد شد.

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

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

نصب با npm:

bash
npm install react-router-dom

نصب با yarn:

bash
yarn add react-router-dom

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

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

jsx
// 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) استفاده می‌کنند.

jsx

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

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

2. Routes و Route

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

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

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

3. Link و NavLink

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

jsx

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

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

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

jsx

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

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

4. useNavigate

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

jsx

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

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

5. useParams

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

jsx

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

const { id } = useParams();

نمونه ساده از پیاده‌سازی مسیرها در React Router DOM

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

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

css
src/
│
├── App.js

├── pages/
│ ├── Home.js

│ ├── About.js
│ └── Contact.js

2. محتوای صفحات ساده:

Home.js

jsx
const Home = () => {
return <h1>صفحه اصلی</h1>;
};

export default Home;

About.js

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

export default About;

Contact.js

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

export default Contact;

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 محسوب می‌شود.

فهرست مطالب

تمام حقوق این سایت متعلق به سایت آموزشکده میباشد

لینک ها

شبکه اجتماعی
Telegram Instagram

مشاوره رایگان

مشاوره رایگان

این سایت توسط گروه نرم افزاری oyek طراحی شده است