برنامه نویسی

اصول اولیه روتر به Advanced (V6+)

ek3nk4r 2025-05-09

0 3 خواندن این مطلب 8 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

فهرست مطالب

مسیریابی چیست؟

Routing refers to the process of navigating between different pages or views in a single-page application (SPA) without reloading the entire page.

این UI را با URL مرورگر فعلی همگام نگه می دارد.
به ما امکان می دهد برنامه های تک صفحه ای (SPA) بسازیم.

چرا مسیریابی در React؟

برنامه های React SPA هستند ، به این معنی که فقط یک پرونده HTML وجود دارد (index.html) ، اما چندین نمایش (صفحات) که کاربران می توانند به آن حرکت کنند. مسیریابی با تطبیق URL با مؤلفه صحیح ، به مدیریت این دیدگاه ها کمک می کند.

من ناوبری سمت مشتری را بدون بارگیری مجدد تمام صفحه امکان پذیر می کند، به کاربران اجازه حرکت می دهد صاف بین URL مانند /homeبا /about، یا /contact، هر یک از اجزای مختلف را نشان می دهند.

React دارای مسیریابی داخلی نیست ، بنابراین ما از کتابخانه ای مانند روتر React (React-Router-Dom) برای استفاده از مسیریابی استفاده می کنیم.

یک برنامه واحد (SPA) چیست؟

یک برنامه یک صفحه (SPA) به صورت پویا صفحه را بدون بارگیری مجدد آن به روز می کند و یک تجربه کاربر بدون درز را ارائه می دهد.

کاملاً در مرورگر (سمت مشتری) اجرا می شود.
URL های مختلف مؤلفه های مختلف React را بارگیری می کنند.
از JavaScript (React) برای به روزرسانی UI به صورت پویا استفاده می کند.
داده های اضافی را از طریق API (به عنوان مثال ، از سرور پس زمینه) دریافت می کند.

When the user clicks a link, the URL updates, and React dynamically loads the corresponding component.

روتر واکنش

REACT روتر محبوب ترین کتابخانه برای رسیدگی به ناوبری در یک برنامه React است.

ناوبری مبتنی بر URL را فعال می کند.
URL های مرورگر را بدون تازه کردن صفحه تغییر دهید.
UI را با URL همگام نگه می دارد.

🔧 نصب

npm install react-router-dom

تعریف مسیرها

With routing, we match different URLs to different UI views. In the case of React, we match a URL to a specific React Component, and we call each of these matches routesبشر

از آنجا که React Router V6.4 ، دو روش اصلی برای تعریف مسیرها وجود دارد. ما به روش اعلامی سنتی توجه خواهیم کرد.

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <BrowserRouter>       {/* 🚀 Enables routing */}
      <Routes>            {/* 🚦 Manages route paths */}
        <Route index element={<Home />} />  {/* Default route */}
        <Route path="https://dev.to/about" element={<About />} />
      Routes>
    BrowserRouter>
  );
}

function Nav() {
  return (
    <nav>
      <Link to="https://dev.to/">HomeLink>         {/* Link to Home */}
      <Link to="https://dev.to/about">AboutLink>   {/* Link to About */}
    nav>
  );
}

مفاهیم کلیدی

– ارائه دهنده روتر
- این مؤلفه سطح بالا است که مسیریابی را در برنامه React شما امکان پذیر می کند.
- این API HTML5 HISTORY API را برای نگه داشتن UI خود با URL مرورگر استفاده می کند.
- از نظر مهم ، بدون ، REACT روتر قادر به مدیریت مسیرهای برنامه شما نخواهد بود.
– ظرف مسیریابی
- این مؤلفه به عنوان یک ظرف برای فرد شما عمل می کند تعاریف
- این هوشمندانه از طریق آن تکرار می شود کودکان و ارائه می دهد یکی اول چه کسی path با URL مرورگر فعلی مطابقت دارد.
- فکر کردن به عنوان یک توزیع کننده بزرگراه مرکزی ، هدایت ترافیک به سمت خروجی های مناسب.
- این جانشین پیرتر است مؤلفه در نسخه های قبلی روتر React.
– یک مسیر و مؤلفه را تعریف کنید
- هر یک مؤلفه به عنوان نقشه برداری بین یک مسیر URL خاص و یک مؤلفه React مربوطه عمل می کند.
- وقتی URL مرورگر با path از ، آن مسیر element (مؤلفه React) ارائه می شود.
- index پروپ مسیر پیش فرض کودک را تعریف می کند (به جای path="https://dev.to/").
- صفحه یافت نشد:
```
  <Route index element={<Home />} />
  <Route path="*" element={<PageNotFound />} />
```
در path="*" به عنوان یک عمل می کند همه چیزبشر اگر هیچ مسیر تعریف شده دیگری با URL فعلی مطابقت نداشته باشد ، این مسیر همسان خواهد شد و مؤلفه نمایش داده می شود.
/ – ناوبری بدون بارگیری مجدد
- این مؤلفه ها ابزارهای اصلی شما برای پیمایش بین مسیرهای مختلف در آبگرم شما هستند بدون ایجاد بارگذاری مجدد صفحه کامل از سرور
- آنها به عنوان استاندارد ارائه می دهند برچسب های موجود در HTML اما برای انجام ناوبری سمت مشتری که توسط React Router اداره می شود ، رویداد کلیک را انجام دهید.
```
import { NavLink } from "react-router-dom";

function Navigation() {
  return (
    <nav>
      <NavLink to="https://dev.to/">HomeNavLink>
      <NavLink to="https://dev.to/about">AboutNavLink>
    nav>
  );
}
```

مسیرهای تو در تو

با افزایش برنامه شما ، ممکن است با سناریوهایی روبرو شوید که بخش های خاصی از زیر و دیدگاه های خاص خود را دارند. اینجاست که مسیرهای تو در تو در توهین آمیز است.
تصور کنید /dashboard بخش با صفحات زیر مانند /dashboard/profile وت /dashboard/settingsبشر
برای اجرای این کار ، شما کودک را تعریف می کنید اجزای درون والدین بشر
کلید ارائه محتوای این مسیرهای تو در تو مؤلفه در مؤلفه مسیر والدین.

<Routes>
    <Route path="/dashboard" element={<Dashboard />}>
        <Route path="profile" element={<Profile />} />
        <Route path="settings" element={<Settings />} />
    Route>
Routes>

در روتر React

در مؤلفه به عنوان یک خدمت می کند محل نگهدارنده در مؤلفه ارائه شده توسط یک مسیر والدین.
هنگامی که یک مسیر کودک از آن مسیر والدین با URL فعلی مطابقت دارد ، مؤلفه مربوطه آن ارائه می شود درون در درون والدین
چرا است ضروری؟
- این شما را قادر می سازد تا ایجاد کنید طرح های قابل استفاده مجددبشر عناصر مشترک UI مانند میله های ناوبری ، نوارهای جانبی و پاورقی ها را می توان در مؤلفه والدین تعریف کرد ، در حالی که محتوای خاص برای مسیرهای کودک به صورت پویا به داخل تزریق می شود بشر
- این یک ساختار مؤلفه تمیز و سازمان یافته را ترویج می کند.

import { Outlet, Link } from "react-router-dom";

const Dashboard = () => {
  return (
    <div>
      <nav>
        <Link to="/profile">ProfileLink>
        <Link to="/settings">SettingsLink>
      nav>

      <hr />
      <Outlet />     {/* Child route components will be rendered here */}
    div>
  );
};

export default Dashboard;

مسیرهای پویا با پارامترهای URL

مسیرهای پویا به شما امکان می دهد مسیرهایی ایجاد کنید که بتواند قسمتهای متغیر URL را اداره کند. این برای نمایش جزئیات یک مورد خاص مانند یک محصول یا نمایه کاربر مفید است.

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

function ProductDetails() {
  const { productId } = useParams();
  return <div>Product ID: {productId}div>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/products/:productId" element={<ProductDetails />} />
      Routes>
    BrowserRouter>
  );
}

useParams() هوک: این قلاب Router React به شما امکان می دهد از URL فعلی به پارامترهای پویا دسترسی پیدا کنید. می توانید این قلاب را در مؤلفه عملکردی ارائه شده توسط مسیر پویا (در این حالت ، ProductDetails) فراخوانی کنید. این شیء را برمی گرداند که در آن کلیدها نام پارامترهای تعریف شده در مسیر (به عنوان مثال ، ProductID) و مقادیر بخش های مربوطه از URL هستند.
/:productId: این نحو در مسیر پیش بینی یک بخش پویا را تعریف می کند. هر مقدار در این موقعیت URL به عنوان پارامتر ProductID ضبط می شود. به عنوان مثال ، اگر URL باشد /products/42، useParams() قلاب در ProductDetails {ProductId: “42”.

ناوبری برنامه ای

`useNavigate` قلاب

در useNavigate هوک به شما امکان می دهد به صورت برنامه ای به مسیرهای مختلف حرکت کنید. این اغلب پس از اقداماتی مانند ارسال فرم یا برای هدایت هدایت احراز هویت استفاده می شود.

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

function Home() {
  const navigate = useNavigate();
  const handleClick = () => {
    navigate('/about');
  };
  return <button onClick={handleClick}>Go to Aboutbutton>;
}

جزء

در از مؤلفه برای هدایت کاربر به مسیری متفاوت استفاده می شود ، اغلب بر اساس شرایط خاص مانند احراز هویت کاربر

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

function ProtectedRoute({ isLoggedIn, children }) {
  if (!isLoggedIn) {
    return <Navigate to="/login" replace />;
  }
  return children;
}

replace Prop: ورودی فعلی را در پشته تاریخ جایگزین می کند.
این برای بررسی های AUTH و تغییر مسیر مفید است.

چگونه مسیریابی ساختار مؤلفه را در React تغییر می دهد

بدون روتر (ساختار مؤلفه سنتی)
به طور معمول ، در یک برنامه React Simple (بدون روتر) ، ما مؤلفه های درون مؤلفه برنامه مانند این را ساختار می دهیم:

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    div>
  );
}

در اینجا ، برنامه مانند یک ظرف والدین عمل می کند که تمام مؤلفه ها را در خود جای داده است ، و همه آنها به طور معمول در کنار هم قرار می گیرند.

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

چرا؟

مسیریابی کنترل می کند چه چیزی را نشان می دهد
- قبل از روتر: برنامه همیشه همه چیز را ارائه می دهد.
- با روتر: صفحات مختلف (مسیرها) فقط در صورت لزوم بارگیری می شوند.
چرا این بهتر است؟ 📌
- عملکرد بهبود یافته: فقط اجزای مورد نیاز برای مسیر فعلی بارگیری و ارائه می شوند و باعث کاهش زمان بار اولیه و بهبود عملکرد کلی می شوند.
- تجربه کاربر نرم: ناوبری بین دیدگاههای مختلف بدون بارگیری مجدد صفحه کامل اتفاق می افتد و تجربه کاربری یکپارچه تر و سریعتر را ارائه می دهد.

درک روتر React با قیاس بزرگراه

مفهوم روتر واکنش نشان می دهد	قیاس در دنیای واقعی
`BrowserRouter`	🛣 شبکه جاده این سفر را امکان پذیر می کند. بدون آن ، هیچ جاده ای وجود ندارد.
`Routes`	🚗 بزرگراه با چندین خروجی (مسیرها).
`Route`	🛑 الف خروجی خاص این منجر به یک مقصد (مؤلفه) می شود.
`Link`	🚦 تابلو آن کاربران را به مسیرهای مختلف هدایت می کند.
	🛣 مکان در بزرگراه جایی که خروجی های تو در تو ادغام می شوند.

بدون BrowserRouter، هیچ جاده ای وجود ندارد!
بدون Routes، هیچ خروجی وجود ندارد!
بدون Route، شما نمی توانید به مقصد خود برسید!
بدون Outlet، مسیرهای تو در تو هیچ جایی برای ارائه ندارند.

thoughts افکار نهایی

مسیریابی ستون فقرات ناوبری در برنامه های React مدرن است. این امکان را به ما می دهد تا بدون بارگیری مجدد صفحه ، تجربیات چند صفحه ای ایجاد کنیم و باعث می شود برنامه های ما سریعتر ، پویاتر و بیشتر شبیه به برنامه های بومی باشند.

با روتر React می توانیم:

URL های MAP به راحتی به اجزای آن.
ناوبری سمت مشتری صاف را فعال کنید.
برنامه های بزرگ را در ساختارهای مسیر تمیز و مقیاس پذیر سازماندهی کنید.
تجربه کاربر را با مسیریابی پویا ، چیدمان های تو در تو ، مسیرهای محافظت شده و ناوبری برنامه ای تقویت کنید.

با ایجاد برنامه های پیشرفته تر React ، تسلط بر مسیریابی سطح جدیدی از قدرت و انعطاف پذیری را در پروژه های شما باز می کند.

به طور خلاصه ، روتر React شکاف بین یک برنامه ساده و یک تجربه وب کاملاً کاربردی را به هم می زند. 🚀

📚 بعدی چیست؟

این پست با استفاده از روتر React 6 بر روی مسیریابی اعلامیه سنتی متمرکز شده است.
با این حال ، برای تمیز کردن و هضم کارها ، برخی از موضوعات پیشرفته را به طور جداگانه در پست بعدی پوشش خواهم داد: