برای ایجاد صفحات و مسیرها در React با استفاده از React Router، باید مراحل زیر را دنبال کنید:
۱. نصب React Router
ابتدا باید React Router را نصب کنید تا بتوانید مسیرها را مدیریت کنید.
۲. ایجاد ساختار اپلیکیشن
ساختار پایهای اپلیکیشن شامل چندین صفحه است که میخواهیم بین آنها مسیریابی کنیم. برای این کار ابتدا چند کامپوننت صفحه ایجاد میکنیم.
مثال: ایجاد صفحات
- صفحه Home:
import React from 'react';
const Home = () => {
return (
<div>
<h1>Home Page</h1>
<p>Welcome to the Home Page</p>
</div>
);
};
export default Home;
- صفحه About:
import React from 'react';
const About = () => {
return (
<div>
<h1>About Page</h1>
<p>Learn more about us!</p>
</div>
);
};
export default About;
- صفحه Contact:
import React from 'react';
const Contact = () => {
return (
<div>
<h1>Contact Page</h1>
<p>Get in touch with us!</p>
</div>
);
};
export default Contact;
۳. ایجاد مسیرها با React Router
حالا که صفحات را ایجاد کردیم، باید از BrowserRouter
و Route
برای تعریف مسیرها استفاده کنیم. همچنین، برای ایجاد نوار ناوبری، از Link
استفاده میکنیم.
فایل اصلی App.js
:
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
const App = () => {
return (
<BrowserRouter>
<div>
{/* نوار ناوبری */}
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
{/* تعریف مسیرها */}
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
</BrowserRouter>
);
};
export default App;
۴. توضیحات کد:
BrowserRouter
: این کامپوننت بهعنوان پوششدهندهی مسیرهای اپلیکیشن استفاده میشود.Route
: هرRoute
یک مسیر را مشخص میکند و با استفاده از ویژگیpath
مسیر URL را تعریف میکند و با ویژگیcomponent
کامپوننت مربوطه را نمایش میدهد.exact
: این ویژگی بهRoute
کمک میکند تا فقط زمانی رندر شود که مسیر دقیقاً با URL مطابقت داشته باشد. بدونexact
، هر مسیری که آغاز به تطابق با URL کند، رندر میشود.
Link
: این کامپوننت برای ناوبری بین صفحات استفاده میشود. برخلاف تگ<a>
, که صفحه را مجدد بارگذاری میکند،Link
باعث میشود تا مسیرها بدون بارگذاری مجدد صفحه تغییر کنند.
۵. پشتیبانی از مسیرهای داینامیک
گاهی اوقات نیاز دارید تا مسیرهایی با پارامترهای پویا ایجاد کنید. برای مثال، اگر بخواهید صفحهی پروفایل کاربری را با شناسه خاصی نمایش دهید.
مثال: مسیر داینامیک (با استفاده از پارامتر)
- صفحه Profile:
import React from 'react';
import { useParams } from 'react-router-dom';
const Profile = () => {
const { userId } = useParams(); // دریافت پارامتر userId از URL
return (
<div>
<h1>Profile Page</h1>
<p>User ID: {userId}</p>
</div>
);
};
export default Profile;
- تعریف مسیر برای صفحه پروفایل با شناسه کاربر:
در اینجا، :userId
یک پارامتر داینامیک است که در URL قرار میگیرد. به عنوان مثال، اگر URL به شکل /profile/123
باشد، مقدار userId
برابر با 123
خواهد بود.
۶. ایجاد مسیرهای پیشرفتهتر
اگر بخواهید مسیری داشته باشید که در صورت دسترسی به یک مسیر خاص، کاربر را به صفحهی دیگری هدایت کند (مثل ریدایرکت کردن)، میتوانید از Redirect
استفاده کنید.
مثال: ریدایرکت کردن:
<Route path="/old-page">
<Redirect to="/new-page" />
</Route>
این باعث میشود که هر زمان که کاربر به /old-page
برود، به /new-page
هدایت شود.
۷. نتیجه نهایی
با استفاده از React Router، توانستید:
- صفحات مختلف را ایجاد کنید.
- مسیرها را با استفاده از
Route
تعریف کنید. - از
Link
برای ایجاد نوار ناوبری و جابجایی بین صفحات استفاده کنید. - مسیرهای داینامیک و ریدایرکتها را به راحتی پیادهسازی کنید.
این ابزار به شما امکان میدهد که یک اپلیکیشن تکصفحهای (SPA) بسازید که در آن بارگذاری مجدد صفحه وجود ندارد و تجربهی کاربری بسیار روان و سریع فراهم میشود.
