نحوه استفاده از React Router V6: راهنمای مبتدیان

یاد بگیرید که چگونه URL های خود را با آخرین نسخه React Router مدیریت کنید.

React Router محبوب ترین کتابخانه ای است که می توانید برای پیاده سازی مسیریابی در برنامه های React استفاده کنید. این یک رویکرد مبتنی بر مؤلفه برای مدیریت انواع وظایف مسیریابی، از جمله ناوبری صفحه، پارامترهای پرس و جو و بسیاری موارد دیگر ارائه می دهد.

React Router V6 تغییرات قابل توجهی را در الگوریتم مسیریابی، برای رفع مشکلات موجود در نسخه قبلی خود، و ارائه راه حل مسیریابی بهبودیافته، معرفی می کند.

شروع مسیریابی با استفاده از React Router V6

برای شروع، یک برنامه React ایجاد کنید. از طرف دیگر، یک پروژه React را با استفاده از Vite راه اندازی کنید. پس از ایجاد پروژه، ادامه دهید و بسته react-router-dom را نصب کنید.

npm install react-router-dom

ایجاد مسیرها با استفاده از روتر React

برای ایجاد مسیرها، با پیچیده کردن کل برنامه با یک جزء BrowserRouter شروع کنید. کد موجود در فایل index.jsx یا main.jsx خود را به صورت زیر به روز کنید:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
)

بسته بندی مولفه App با مولفه BrowserRouter تضمین می کند که کل برنامه به زمینه مسیریابی و ویژگی های ارائه شده توسط کتابخانه React Router دسترسی پیدا می کند.

استفاده از مولفه Routes

هنگامی که برنامه را با مولفه BrowserRouter پیچیده اید، می توانید مسیرهای خود را تعریف کنید.

کامپوننت Routes بهبود مولفه Switch است که قبلاً توسط React Router v5 استفاده شده بود. این مؤلفه از مسیریابی نسبی، رتبه بندی خودکار مسیرها و توانایی کار با مسیرهای تو در تو پشتیبانی می کند.

به طور معمول، مسیرها را در بالاترین سطح برنامه خود، اغلب در مولفه برنامه اضافه می کنید. با این حال، بسته به ساختار پروژه خود، می توانید آنها را در هر مکان دیگری تعریف کنید.

فایل App.jsx را باز کنید و کد Boilerplate React را با کد زیر جایگزین کنید:

import './App.css'
import { Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import About from './pages/About';

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </>
  )
}

export default App

این پیکربندی مسیریابی مسیرهای URL خاص را به اجزای صفحه مربوطه (داشبورد و درباره) ترسیم می‌کند، و اطمینان می‌دهد که برنامه هنگام بازدید کاربر از یک URL خاص، مؤلفه مناسب را ارائه می‌کند.

به عنصر prop، در کامپوننت Route توجه کنید، که به شما امکان می دهد یک جزء کاربردی را بر خلاف نام کامپوننت ارسال کنید. این امکان را برای عبور از مسیرها و اجزای مرتبط با آنها فراهم می کند.

در دایرکتوری src، یک دایرکتوری صفحات جدید ایجاد کنید و دو فایل جدید اضافه کنید: Dashboard.jsx و About.jsx. پیش بروید و اجزای عملکردی را در این فایل ها تعریف کنید تا مسیرها را آزمایش کنید.

استفاده از createBrowserRouter برای تعریف مسیرها

مستندات React Router استفاده از مؤلفه createBrowserRouter را برای تعریف پیکربندی مسیریابی برای برنامه‌های وب React توصیه می‌کند. این مؤلفه یک جایگزین سبک وزن برای BrowserRouter است که آرایه ای از مسیرها را به عنوان آرگومان خود در نظر می گیرد.

با استفاده از این مؤلفه، نیازی به تعریف مسیرهای خود در مؤلفه App نیست. در عوض، می‌توانید تمام تنظیمات مسیر خود را در فایل index.jsx یا main.jsx ترسیم کنید.

در اینجا مثالی از نحوه استفاده از این مؤلفه آورده شده است:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from './App.jsx'
import Dashboard from './pages/Dashboard';
import About from './pages/About';


const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/dashboard",
    element: <Dashboard />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

پیکربندی مسیریابی از اجزای createBrowserRouter و RouterProvider برای ایجاد یک سیستم مسیریابی برای برنامه React استفاده می کند.

با این حال، تنها تفاوت با این پیاده سازی این است که به جای بسته بندی برنامه با استفاده از کامپوننت BrowserRouter، از مولفه RouterProvider برای ارسال متن Router به تمام اجزای برنامه استفاده می کند.

پیاده سازی مسیرهای صفحه یافت نشد

پایه مسیر در مؤلفه Route مسیر ارائه شده را با URL فعلی مقایسه می کند تا قبل از رندر کردن مؤلفه مورد نیاز، تعیین کند که آیا مطابقت دارد یا خیر.

برای رسیدگی به مواردی که هیچ مسیری مطابقت ندارد، می توانید یک مسیر خاص ایجاد کنید که خطاهای 404 صفحه یافت نشد را مدیریت کند. گنجاندن این مسیر تضمین می‌کند که کاربران می‌توانند در موقعیت‌هایی که به یک URL ناموجود دسترسی پیدا کرده‌اند، پاسخ‌های معناداری دریافت کنند.

برای پیاده سازی مسیر 404، این مسیر را در مولفه Routes اضافه کنید:

// using the Route component
<Route path="*" element={<NotFound />} /> 

// using createBrowserRouter
{ path: "*", element: <NotFound />, },

سپس یک کامپوننت NotFound.jsx سفارشی ایجاد کنید و در نهایت با استفاده از ماژول های CSS به کامپوننت استایل دهید.

ستاره (*) یک کاراکتر عام است که سناریوهایی را کنترل می کند که در آن هیچ یک از مسیرهای مشخص شده با URL فعلی مطابقت ندارد.

پیمایش برنامه‌ای با استفاده از useNavigate Hook

قلاب useNavigate یک روش برنامه‌ریزی شده برای مدیریت ناوبری در برنامه‌ها ارائه می‌کند. این قلاب به ویژه زمانی مفید است که می‌خواهید در پاسخ به تعاملات یا رویدادهای کاربر، مانند کلیک روی دکمه یا ارسال فرم، ناوبری را فعال کنید.

بیایید نگاهی به نحوه استفاده از قلاب useNavigate برای پیمایش برنامه ای بیاندازیم. با فرض ایجاد مؤلفه عملکردی About.jsx، قلاب را از بسته React Router وارد کنید:

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

سپس دکمه ای را اضافه کنید که با کلیک کردن، پیمایش به یک مسیر مشخص را آغاز می کند.

function About() {
  const navigate = useNavigate();

  const handleButtonClick = () => {
    navigate("/");
  };

  return (
    <>
      // Rest of the code ...
      <button onClick={handleButtonClick}>
    </>
  );
}

export default About;

شایان ذکر است که قلاب useNavigate و قلاب useNavigation که در React Router v6 معرفی شده‌اند، علیرغم نام‌های نزدیک، اهداف متفاوتی را دنبال می‌کنند.

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

در اینجا مثالی از نحوه استفاده از قلاب useNavigation آورده شده است.

import { useNavigation } from "react-router-dom";

function SubmitButton() {
  const navigation = useNavigation();

  const buttonText =
    navigation.state === "submitting"
      ? "Saving..."
      : navigation.state === "loading"
        ? "Saved!"
        : "Go";

  return <button type="submit">{buttonText}</button>;
}

در این مثال، مؤلفه SubmitButton متن خود را به صورت پویا بر اساس وضعیت پیمایش به‌دست‌آمده از قلاب useNavigation به‌روزرسانی می‌کند.

با وجود اینکه این قلاب ها نقش های متفاوتی دارند، باز هم می توانید از آنها با هم استفاده کنید. قلاب useNavigate برای شروع فرآیند ناوبری و استفاده از قلاب Navigation برای بازیابی جزئیات ناوبری در زمان واقعی، که سپس نوع رابط کاربری بازخوردی را برای ارائه در مرورگر هدایت می‌کند.

با استفاده از userRoutes Hook

این قلاب به شما امکان می دهد مسیرهای مسیر را در کنار اجزای متناظر آنها در یک شی تعریف کنید. سپس از قلاب برای تطبیق مسیرها و نمایش اجزای مربوطه استفاده می شود.

در اینجا یک مثال ساده از نحوه استفاده از قلاب آورده شده است:

import { useRoutes } from 'react-router-dom';
import Dashboard from './Dashboard';
import About from './About';

const routes = [
  {
    path: '/',
    element: <Dashboard/>,
  },
  {
    path: '/about',
    element: <About />,
  },
];

function App() {
  const routeResult = useRoutes(routes);
  return routeResult;
}

export default App;

در این مثال، شی routes نگاشت مسیرهای URL به اجزا را تعریف می کند. سپس مؤلفه App از این قلاب برای مطابقت با URL فعلی استفاده می کند و مؤلفه مناسب را بر اساس مسیر منطبق ارائه می دهد.

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

مدیریت مسیریابی در برنامه های React

اگرچه React خود مکانیزمی از پیش ساخته برای انجام وظایف مسیریابی ندارد، اما React Router این شکاف را پر می کند. این مؤلفه های مسیریابی مختلف و توابع ابزاری را ارائه می دهد که می توانید به راحتی از آنها برای ایجاد برنامه های کاربردی تعاملی و کاربر پسند استفاده کنید.

منبع مقاله