react-applications-ریکت-کاربردهادوره رایگان-الگوریتم اول-free-آموزش کامل

لطفا صبر کنید...

معرفی 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 ابتدا باید آن را نصب کنید:

npm install react-router-dom

 

بعد از نصب، باید آن را در ریشه اپلیکیشن خود وارد کرده و به‌درستی از آن استفاده کنید.

 

۳. استفاده از React Router

🔹 BrowserRouter

برای شروع استفاده از React Router باید از BrowserRouter به عنوان پوشش‌دهنده‌ی مسیرها استفاده کنید. این کامپوننت تمامی مسیرها و لینک‌ها را در خود جای می‌دهد.

مثال:

import React from 'react';
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 React from 'react';
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 React from 'react';
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 React from 'react';
import { useParams } from 'react-router-dom';
const UserProfile = () => {
  const { userId } = useParams();
 
  return (
    <div>
      <h2>User Profile: {userId}</h2>
    </div>
  );
};
export default UserProfile;

 

تعریف مسیر:

<Route path="/user/:userId" component={UserProfile} />
  • در این مثال، :userId یک پارامتر پویا است که می‌تواند مقدار متفاوتی داشته باشد.

 

🔹 مسیرهای محافظت‌شده

برای ایجاد مسیرهایی که فقط در صورت احراز هویت کاربر قابل دسترسی باشند، می‌توانیم مسیرهای محافظت‌شده ایجاد کنیم. برای این کار باید به‌طور دستی دسترسی به مسیرها را کنترل کنیم.

مثال:

import React from 'react';
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 React, { Suspense } from 'react';
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 تبدیل کرده است.