معرفی React Router
React Router یکی از مهمترین کتابخانهها برای مدیریت مسیرها (Routing) در اپلیکیشنهای React است. با استفاده از React Router میتوانیم بین صفحات مختلف اپلیکیشن خود ناوبری (navigation) انجام دهیم و تجربهی کاربری بهتری را برای کاربران فراهم کنیم.
در اینجا به ویژگیها و نحوهی استفاده از React Router پرداخته میشود.
۱. چرا از React Router استفاده کنیم؟
React Router به شما این امکان را میدهد که در اپلیکیشنهای React خود مسیرهای مختلف را مدیریت کنید. این کتابخانه از مفاهیم مسیرهای پویا، مسیریابی واکنشگرا و بارگذاری تنبل (lazy loading) پشتیبانی میکند.
ویژگیهای اصلی React Router:
- مسیریابی در سمت کلاینت: نیازی به بارگذاری مجدد صفحهها نیست. اپلیکیشن شما مانند یک اپلیکیشن تکصفحهای (SPA) رفتار میکند.
- پشتیبانی از URLهای پویا: میتوانید مسیرهایی بسازید که به پارامترهای داینامیک پاسخ دهند.
- پشتیبانی از نوار ناوبری (NavBar): ایجاد نوار ناوبری برای حرکت بین صفحات به راحتی.
- مسیرهای محافظتشده: میتوانید مسیرهایی که فقط به کاربرانی خاص (مثلاً کاربرانی که وارد شدهاند) دسترسی دارند را محدود کنید.
۲. نصب React Router
برای استفاده از React Router ابتدا باید آن را نصب کنید:
بعد از نصب، باید آن را در ریشه اپلیکیشن خود وارد کرده و بهدرستی از آن استفاده کنید.
۳. استفاده از React Router
🔹 BrowserRouter
برای شروع استفاده از React Router باید از BrowserRouter
به عنوان پوششدهندهی مسیرها استفاده کنید. این کامپوننت تمامی مسیرها و لینکها را در خود جای میدهد.
مثال:
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
🔹 تعریف مسیرها با Route
با استفاده از Route
میتوانید مسیرها و صفحات مختلف را در اپلیکیشن خود تعریف کنید. هر Route
باید به یک مسیر مشخص اشاره کند و کامپوننتی را که باید رندر شود، تعیین کند.
مثال:
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';
const App = () => {
return (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route component={NotFound} />
</Switch>
</div>
);
};
export default App;
path
: مسیر URL که کاربر به آن میرود.component
: کامپوننتی که باید رندر شود.
توجه: استفاده از exact
باعث میشود که تنها زمانی مسیر دقیقاً مطابق با URL باشد، این Route رندر شود. بدون exact
، هر مسیری که شروع به تطابق با URL کند، رندر میشود.
🔹 استفاده از Link
برای ناوبری
برای حرکت بین صفحات، از Link
به جای استفاده از تگهای معمولی <a>
استفاده میکنیم. Link
از React Router برای انجام مسیریابی بدون بارگذاری مجدد صفحه استفاده میکند.
مثال:
import { Link } from 'react-router-dom';
const NavBar = () => {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
);
};
export default NavBar;
to
: مسیر URL که میخواهید کاربر به آن برود.
🔹 استفاده از useParams
برای دریافت پارامترها
برای دریافت پارامترهای پویا از URL، از useParams
استفاده میکنیم. این هوک پارامترهای مسیر را استخراج کرده و در اختیار ما قرار میدهد.
مثال:
import { useParams } from 'react-router-dom';
const UserProfile = () => {
const { userId } = useParams();
return (
<div>
<h2>User Profile: {userId}</h2>
</div>
);
};
export default UserProfile;
تعریف مسیر:
- در این مثال،
:userId
یک پارامتر پویا است که میتواند مقدار متفاوتی داشته باشد.
🔹 مسیرهای محافظتشده
برای ایجاد مسیرهایی که فقط در صورت احراز هویت کاربر قابل دسترسی باشند، میتوانیم مسیرهای محافظتشده ایجاد کنیم. برای این کار باید بهطور دستی دسترسی به مسیرها را کنترل کنیم.
مثال:
import { Route, Redirect } from 'react-router-dom';
const ProtectedRoute = ({ component: Component, ...rest }) => {
const isAuthenticated = false; // وضعیت احراز هویت
return (
<Route
{...rest}
render={props =>
isAuthenticated ? (
<Component {...props} />
) : (
<Redirect to="/login" />
)
}
/>
);
};
Redirect
: در صورتی که کاربر احراز هویت نشود، به صفحهی لاگین هدایت میشود.
۴. ویژگیهای پیشرفته React Router
Switch
: برای اطمینان از این که تنها یکRoute
در یک زمان رندر شود، ازSwitch
استفاده میکنیم.- پارامترهای کوئری: میتوانیم از
useLocation
برای دریافت پارامترهای URL استفاده کنیم. - بارگذاری تنبل (Lazy Loading): میتوانیم از
React.lazy
برای بارگذاری تنبل مسیرها استفاده کنیم تا زمانی که کاربر به آن صفحه میرود، محتوا بارگذاری شود.
مثال بارگذاری تنبل:
import { Route } from 'react-router-dom';
const About = React.lazy(() => import('./About'));
const App = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<Route path="/about" component={About} />
</Suspense>
);
};
export default App;
جمعبندی
React Router ابزاری قدرتمند برای مدیریت مسیرها در اپلیکیشنهای React است. این کتابخانه به شما این امکان را میدهد که اپلیکیشنهای تکصفحهای (SPA) بسازید و بین صفحات مختلف به راحتی مسیریابی کنید، بدون اینکه نیاز به بارگذاری مجدد صفحه باشد.
ویژگیهایی مانند پارامترهای پویا، مسیریابی محافظتشده، و پشتیبانی از بارگذاری تنبل، React Router را به یکی از بهترین ابزارها برای اپلیکیشنهای React تبدیل کرده است.
