Routing چیست و Client-Side Routing

تا اینجا در این دوره، هر برنامه‌ای که ساختیم عملاً در یک صفحه واحد زندگی می‌کرد. اما اکثر برنامه‌های واقعی چند صفحه (مثل خانه، محصولات، پروفایل) دارند که کاربر بین آن‌ها حرکت می‌کند. مدیریت این حرکت، موضوع Routing است و این فصل به آن اختصاص دارد.

Routing در وب سنتی

در یک سایت سنتی (بدون React)، هر آدرس URL به یک فایل HTML جداگانه روی سرور اشاره می‌کند. با کلیک روی یک لینک، مرورگر یک درخواست کامل جدید به سرور می‌فرستد، صفحه فعلی کاملاً دور ریخته می‌شود، و صفحه جدید از صفر بارگذاری و رندر می‌شود.

مشکل این روش برای برنامه‌های React

اگر یک برنامه React، State پیچیده‌ای دارد (مثلاً یک سبد خرید یا یک فرم نیمه‌تکمیل)، بارگذاری کامل مجدد صفحه با هر تغییر مسیر، یعنی از دست رفتن کل این State؛ چون طبق چیزی که در فصل یازدهم دیدیم، Unmount شدن کامل برنامه، یعنی از صفر شروع شدن آن. این تجربه هم کند است و هم برای برنامه‌ای که قرار است «اپلیکیشن» باشد، نه مجموعه‌ای از صفحات جدا، طبیعی نیست.

راه‌حل: Client-Side Routing

در Client-Side Routing، به‌جای درخواست یک صفحه کاملاً جدید از سرور، جاوااسکریپت خودِ برنامه، تغییر URL را تشخیص می‌دهد و تصمیم می‌گیرد کدام کامپوننت باید نمایش داده شود؛ بدون اینکه مرورگر صفحه را از نو بارگذاری کند. کل برنامه، همچنان همان یک صفحه HTML اولیه است؛ فقط محتوای داخل آن، بر اساس URL، عوض می‌شود.

چگونه این کار ممکن است: History API

مرورگرها یک API استاندارد به نام History API دارند که به جاوااسکریپت اجازه می‌دهد URL نوار آدرس را تغییر دهد، بدون درخواست یک صفحه جدید از سرور:

// تغییر URL بدون رفرش صفحه
window.history.pushState({}, "", "/products");

کتابخانه‌های Routing که در درس‌های بعدی با آن‌ها کار می‌کنیم (مانند React Router)، این API را پشت یک رابط ساده‌تر و اعلانی (Declarative) پنهان می‌کنند؛ شما معمولاً خودتان مستقیماً با pushState کار نمی‌کنید.

تفکیک نگاه React Routing: URL، یک منبع داده دیگر است

از دید React، URL فعلی را می‌توان مثل یک نوع دیگر از State در نظر گرفت؛ با این تفاوت کلیدی که منبع آن، نوار آدرس مرورگر است، نه useState داخل یک کامپوننت. تغییر URL، باعث می‌شود React تصمیم بگیرد کدام کامپوننت‌ها باید رندر شوند؛ دقیقاً مثل اینکه یک State تغییر کرده و Conditional Rendering (که در فصل اول دیدیم) باعث نمایش بخش متفاوتی از JSX شده باشد.

مرور آنچه در ادامه فصل می‌بینیم

در درس‌های بعدی این فصل، به‌ترتیب با تعریف Routeها و Nested Routes، گرفتن پارامتر از URL، Query Parameters، ناوبری بین صفحات، محافظت از مسیرهای خاص، و تقسیم کد بر اساس مسیر آشنا می‌شویم. همه این‌ها روی همین پایه بنا می‌شوند: URL، منبع تعیین‌کننده این‌که چه چیزی روی صفحه نمایش داده شود.

مثال قابل اجرا

در این مثال ساده، بدون هیچ کتابخانه خارجی، فقط با گوش‌دادن به تغییر مسیر، همان ایده پایه Client-Side Routing شبیه‌سازی شده است.

شبیه‌سازی ساده Client-Side Routing بدون کتابخانه

import { useState } from "react";

function HomePage() {
  return <p>این صفحه خانه است.</p>;
}

function AboutPage() {
  return <p>این صفحه درباره ماست.</p>;
}

function App() {
  const [path, setPath] = useState("/");

  return (
    <div>
      <nav>
        <button onClick={() => setPath("/")}>خانه</button>
        <button onClick={() => setPath("/about")}>درباره ما</button>
      </nav>

      {path === "/" ? <HomePage /> : <AboutPage />}
    </div>
  );
}

برای دیدن پیش‌نمایش کامپوننت، روی Run بزنید.

جمع‌بندی

Client-Side Routing یعنی تغییر محتوای نمایش‌داده‌شده بر اساس URL، بدون درخواست یک صفحه کاملاً جدید از سرور؛ این کار با History API مرورگر ممکن می‌شود و از بین رفتن State برنامه با هر تغییر مسیر جلوگیری می‌کند. از دید React، می‌توان URL را نوعی منبع داده دانست که تعیین می‌کند کدام کامپوننت‌ها رندر شوند. در درس بعدی، به تعریف Routeها و Nested Routes می‌پردازیم.

Routing چیست و Client-Side Routing