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

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

در اینجا به توضیح مسیرهای دامنه‌ای و ارسال پارامترها در React Router خواهیم پرداخت.

۱. مسیرهای دامنه‌ای (Nested Routes)

مسیرهای دامنه‌ای به شما امکان می‌دهند که مسیرهایی در داخل مسیرهای دیگر تعریف کنید. این بدان معناست که یک مسیر می‌تواند شامل مسیرهای زیرمجموعه‌ای باشد که تحت عنوان مسیرهای تو در تو (Nested Routes) شناخته می‌شود.

مثال: ساختار مسیرهای تو در تو

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

ابتدا صفحات مختلف را ایجاد می‌کنیم:

// Profile.js

import React from 'react';

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

const Profile = ({ match }) => {

  return (

    <div>

      <h1>Profile Page</h1>

      <nav>

        <ul>

          <li><Link to={`${match.url}/info`}>User Info</Link></li>

          <li><Link to={`${match.url}/posts`}>Posts</Link></li>

        </ul>

      </nav>

      {/* مسیرهای تو در تو */}

      <Route path={`${match.path}/info`} component={UserInfo} />

      <Route path={`${match.path}/posts`} component={UserPosts} />

    </div>

  );

};

// صفحات زیرمجموعه

const UserInfo = () => <div><h2>User Info</h2></div>;

const UserPosts = () => <div><h2>User Posts</h2></div>;

export default Profile;

در این مثال:

match.url: این ویژگی، URL فعلی را که کاربر در آن قرار دارد می‌گیرد.
match.path: این ویژگی مسیر والد را می‌دهد که برای مسیرهای تو در تو استفاده می‌شود.

تعریف مسیرها در App.js:

import React from 'react';

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

import Profile from './Profile';

const App = () => {

  return (

    <BrowserRouter>

      <Switch>

        <Route path="/profile/:userId" component={Profile} />

      </Switch>

    </BrowserRouter>

  );

};

export default App;

در اینجا مسیر اصلی برای پروفایل کاربر /profile/:userId است، و سپس زیرصفحات User Info و User Posts در داخل آن بارگذاری می‌شوند.

۲. ارسال پارامترها به مسیرهای مختلف

برای ارسال داده‌ها بین صفحات مختلف، دو روش اصلی وجود دارد:

استفاده از پارامترهای URL (URL Params)
استفاده از پروپرتی state در Link و Route

۲.۱ ارسال پارامترها از طریق URL

برای ارسال پارامترها از طریق URL، از پارامترهای داینامیک در مسیر استفاده می‌کنیم.

مثال: ارسال پارامتر در URL

فرض کنید یک مسیر برای نمایش جزئیات یک محصول داریم که شناسه محصول به‌صورت پارامتر در URL ارسال می‌شود:

صفحه Product که شناسه محصول را از URL می‌گیرد:

// Product.js

import React from 'react';

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

const Product = () => {

  const { productId } = useParams(); // دریافت شناسه محصول از URL

  return (

    <div>

      <h1>Product Details</h1>

      <p>Product ID: {productId}</p>

    </div>

  );

};

export default Product;

تعریف مسیر برای صفحه محصول در App.js:

import React from 'react';

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

import Product from './Product';

const App = () => {

  return (

    <BrowserRouter>

      <Switch>

        <Route path="/product/:productId" component={Product} />

      </Switch>

    </BrowserRouter>

  );

};

export default App;

در اینجا، پارامتر :productId از URL دریافت می‌شود و در داخل کامپوننت Product به‌طور داینامیک استفاده می‌شود.

۲.۲ ارسال پارامترها از طریق `state` در `Link`

اگر بخواهید پارامترهایی را که از مسیر به دست نمی‌آیند، به‌طور مستقیم از کامپوننت ارسال کنید، می‌توانید از state در Link استفاده کنید.

مثال: ارسال پارامتر با استفاده از `state`

صفحه Home که داده‌ها را به صفحه‌ی Product ارسال می‌کند:

// Home.js

import React from 'react';

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

const Home = () => {

  return (

    <div>

      <h1>Home Page</h1>

      <Link to={{ pathname: "/product/123", state: { name: "Product Name", price: "$100" } }}>

        Go to Product Details

      </Link>

    </div>

  );

};

export default Home;

صفحه Product که داده‌های ارسال‌شده را از location.state دریافت می‌کند:

// Product.js

import React from 'react';

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

const Product = () => {

  const location = useLocation(); // استفاده از location برای دریافت state ارسال‌شده

  return (

    <div>

      <h1>Product Details</h1>

      <p>Name: {location.state?.name}</p>

      <p>Price: {location.state?.price}</p>

    </div>

  );

};

export default Product;

در اینجا، داده‌ها از Link با استفاده از state به صفحه Product ارسال می‌شود و در آنجا با استفاده از useLocation قابل دسترسی است.

۳. مقایسه ارسال پارامترها

روش	توضیحات
پارامترهای URL	پارامترها به‌طور مستقیم در URL نمایش داده می‌شوند. برای مواردی مثل شناسه‌ها یا اطلاعاتی که باید در URL موجود باشند، از این روش استفاده می‌شود.
`state` در `Link`	داده‌ها از طریق `state` ارسال می‌شوند، که این روش برای ارسال داده‌هایی که نباید در URL نمایش داده شوند، مناسب است. این داده‌ها فقط در زمان انتقال به کامپوننت مقصد قابل دسترسی هستند.

۴. نتیجه‌گیری

مسیرهای دامنه‌ای (Nested Routes) به شما این امکان را می‌دهند که مسیرهایی تو در تو ایجاد کنید که به‌صورت سلسله‌مراتبی باشند.
برای ارسال پارامترها به مسیرها می‌توانید از پارامترهای داینامیک در URL یا از state در Link استفاده کنید.
استفاده از پارامترهای URL برای داده‌هایی که به طور طبیعی باید در URL باشند (مثل شناسه کاربر یا محصول) مناسب است.
استفاده از state برای ارسال داده‌های اضافی که نباید در URL ظاهر شوند، مناسب است.

با این روش‌ها می‌توانید مسیریابی داینامیک و پیچیده‌ای را در اپلیکیشن‌های React خود پیاده‌سازی کنید.