مسیرهای دامنهای و ارسال پارامترها در React Router
در React Router، میتوانید مسیرهایی تعریف کنید که به پارامترهای پویا نیاز دارند. این پارامترها ممکن است اطلاعاتی مانند شناسه کاربر، محصول یا هر داده دیگری باشند که بهطور دینامیک از URL دریافت میشود.
در اینجا به توضیح مسیرهای دامنهای و ارسال پارامترها در React Router خواهیم پرداخت.
۱. مسیرهای دامنهای (Nested Routes)
مسیرهای دامنهای به شما امکان میدهند که مسیرهایی در داخل مسیرهای دیگر تعریف کنید. این بدان معناست که یک مسیر میتواند شامل مسیرهای زیرمجموعهای باشد که تحت عنوان مسیرهای تو در تو (Nested Routes) شناخته میشود.
مثال: ساختار مسیرهای تو در تو
فرض کنید شما یک صفحه پروفایل دارید و میخواهید زیرصفحات مانند اطلاعات کاربر و پستها را در داخل صفحه پروفایل قرار دهید.
- ابتدا صفحات مختلف را ایجاد میکنیم:
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 { 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 میگیرد:
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 { 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 ارسال میکند:
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
دریافت میکند:
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 خود پیادهسازی کنید.
