نحوه مدیریت مسیریابی در اپ‌های React با React Router

مقدمه

در React، روترها به شما کمک می‌کنند بین URLهای مختلف در اپلیکیشن جابه‌جا شوید. این کار باعث می‌شود کاربر بتواند بین بخش‌های مختلف برنامه حرکت کند بدون اینکه وضعیت (state) از بین برود. همچنین هر بخش از اپ می‌تواند URL مخصوص به خودش را داشته باشد که اشتراک‌گذاری آن را راحت‌تر می‌کند.

کتابخانه React Router یکی از محبوب‌ترین ابزارهای مسیریابی در React است. این کتابخانه با استفاده از کامپوننت‌های ساده، یک سیستم مسیریابی اعلامی (declarative) در اختیار شما قرار می‌دهد؛ یعنی شما مشخص می‌کنید هر مسیر (route) چه کامپوننتی را نمایش دهد.

در این آموزش یاد می‌گیرید:

• نصب و تنظیم React Router
• ساخت مسیرها (routes)
• استفاده از کامپوننت <Link>
• ساخت مسیرهای داینامیک
• استفاده از Hooks برای دریافت اطلاعات مسیر
• پیاده‌سازی مسیرهای تو در تو (nested routes)

پیش‌نیازها

• نصب Node.js
• ساخت پروژه React با Create React App
• آشنایی پایه با JavaScript، HTML و CSS
• آشنایی با کامپوننت‌ها و Hooks در React

مرحله 1: نصب React Router

در ترمینال دستور زیر را اجرا کنید:

npm install react-router-dom

سپس چند کامپوننت ساده بسازید (مثلاً برای حیوانات دریایی):

• Manatee
• Narwhal
• Whale

هر کدام فقط یک <h2> ساده نمایش می‌دهند.

مرحله 2: اضافه کردن مسیرها (Routes)

در فایل App.js:

import { BrowserRouter, Route, Switch } from 'react-router-dom';

ساختار اصلی:

<BrowserRouter>
  <Switch>
    <Route path="/manatee">
      <Manatee />
    </Route>
    <Route path="/narwhal">
      <Narwhal />
    </Route>
    <Route path="/whale">
      <Whale />
    </Route>
  </Switch>
</BrowserRouter>

نکته مهم

ترتیب مسیرها مهم است. مسیرهای خاص‌تر باید بالاتر قرار بگیرند.

ساخت منو با Link

به جای <a> از <Link> استفاده کنید:

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

<Link to="/whale">Whale</Link>

✅ مزیت: بدون رفرش صفحه جابه‌جا می‌شود.

مرحله 3: دریافت داده از URL با Hooks

استفاده از useLocation (Query Params)

مثلاً:

/whale?type=blue

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

const { search } = useLocation();

سپس مقدار را استخراج می‌کنید.

استفاده از useParams (URL Params)

مثلاً:

/whale/blue

Route:

<Route path="/whale/:type">

در کامپوننت:

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

const { type } = useParams();

مرحله 4: مسیرهای تو در تو (Nested Routes)

در کامپوننت Whale:

import { Switch, Route, useRouteMatch } from 'react-router-dom';

const { path } = useRouteMatch();

<Switch>
  <Route path={`${path}/beluga`}>
    <Beluga />
  </Route>
  <Route path={`${path}/blue`}>
    <Blue />
  </Route>
</Switch>

✅ این کار باعث می‌شود ساختار پروژه تمیزتر و قابل نگهداری‌تر شود.

جمع‌بندی

در این آموزش یاد گرفتید:

• React Router چیست
• چگونه مسیرها را تعریف کنید
• چطور بدون رفرش صفحه ناوبری انجام دهید
• استفاده از پارامترهای URL
• ساخت مسیرهای داینامیک و تو در تو

از همراهی شما با پارمین کلود سپاسگزاریم.