آموزش روتر React: مانند یک حرفه ای تغییر مسیر دهید

مسیریابی بومی React ریسک و نگهداری را افزایش می دهد. این آموزش کاوش کاملی از رویکردهای مسیریابی را ارائه می‌کند و به راه‌حلی زیبا دست می‌یابد که به طور یکپارچه در هر پایه کد React قرار می‌گیرد.

React Router عملاً راه حل تغییر و مسیریابی صفحه React است. React Router یکی از اولین پروژه‌های محبوب و منبع باز پیرامون React در سال 2014 بود و همراه با React به جایگاه برجسته‌ای در اکوسیستم React تبدیل شد.

در این آموزش React Router، من با یک مفهوم کلیدی شروع می کنم و انتخاب خود را برای کتابخانه مسیریابی توضیح می دهم. سپس نحوه ایجاد یک برنامه کاربردی ساده با منطق برنامه ای کافی برای نمایش ویژگی های مسیریابی مختلف را شرح می دهم. در نهایت، من بر اجرای یک کامپوننت زیبا، ایمن و قابل استفاده مجدد برای دستیابی به یک راه حل مسیریابی با حداقل مزاحمت و نگهداری کم تمرکز می کنم. کد مسیریابی به دست آمده با دستورالعمل‌ها و سبک کدنویسی React برای تناسب یکپارچه در هر برنامه اخیر React مطابقت دارد.

اصول مسیریابی اعلامی

مسیریابی اعلامی سبک کدنویسی است که در روتر React و React استفاده می شود. مسیرهای اعلامی React کامپوننتی هستند و از همان pipeline های موجود در هر برنامه React استفاده می کنند. از آنجایی که مسیرها کامپوننتی هستند، از رویکردهای ثابت بهره می برند.

این مسیرها آدرس‌های وب را با صفحات خاص و سایر کامپوننت‌ها مرتبط می‌کنند و از موتور رندر قدرتمند React و منطق شرطی برای روشن و خاموش کردن مسیرها به صورت برنامه‌نویسی استفاده می‌کنند. مسیریابی شرطی در React به ما اجازه می دهد تا منطق برنامه را پیاده سازی کنیم تا مطمئن شویم مسیرهای ما صحیح و به اندازه کافی ایمن هستند.

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

چه چیزی React Router را در مقایسه با سایر کتابخانه های مسیریابی بهترین می کند؟

• دارای تعاریف مسیر اعلامی است (با استفاده از JSX در داخل اجزای React).
• استاندارد صنعت است.
• این نمونه کدهای فراوان و مجموعه ای از آموزش های آنلاین را ارائه می دهد.
• این کد قراردادهای مدرن React (با استفاده از هوک ها و کامپوننت های تابعی) را ارائه می دهد.

توسعه دهندگانی که از نسخه قبلی React Router v5 استفاده می کنند، باید در مورد سه تغییر کلیدی React Router v6 بدانند:

کامپوننت <Switch> به <Routes> تغییر نام داده است.
یک هوک ()useRoutes جایگزین react-router-config برای تعریف مسیرها به عنوان اشیاء ساده می شود.
هر فرزند کامپوننت <Routes> باید <Route> باشد. این می تواند برخی از روش های قبلی را برای سازماندهی و ترکیب مسیرها شکست دهد.

ادامه این مقاله الگوهای مختلف سازگار با v6 را بررسی می کند و با ترکیب نهایی و زیباترین مسیر ما به پایان می رسد.

ایجاد یک برنامه مسیریابی با React

هر آموزش مسیریابی React به یک زیر بنای اساسی نیاز دارد تا ویژگی های مورد نظر خود را به نمایش بگذارد. ما انتظار داریم که سیستم توسعه شما npm را نصب کرده باشد. بیایید یک پروژه React ساده با Vite ایجاد کنیم - نیازی به نصب جداگانه Vite نیست - که ساختار برنامه React پایه ما، یک وب سرور مستقل و همه وابستگی‌های لازم را فراهم می‌کند:

npm create vite@latest redirect-app -- --template react-ts

این دستور برنامه اصلی ما را با استفاده از TypeScript ایجاد می کند.

پایه React Routes

React Router کاربران را به صفحات درون کلاینت با توجه به آدرس های وب مرتبط هدایت می کند. منطق مسیریابی یک برنامه شامل منطق کلی برنامه و همچنین درخواست صفحات ناشناخته (به عنوان مثال، تغییر مسیر به صفحه 404) است.

از آنجایی که React یک برنامه تک صفحه ای (SPA) تولید می کند، این مسیرها برنامه های وب قدیمی را با مسیریابی فیزیکی یا مبتنی بر فایل جداگانه شبیه سازی می کنند. React تضمین می کند که کاربر نهایی توهم یک وب سایت و مجموعه صفحات آن را حفظ می کند و در عین حال مزایای SPA ها مانند انتقال فوری صفحه را حفظ می کند. کتابخانه React Router همچنین تضمین می‌کند که تاریخچه مرورگر در دسترس باقی می‌ماند و دکمه برگشت فعال باقی می‌ماند.

از مسیر React خود محافظت کنید

React Routes دسترسی به کامپوننت های خاص را با SPA فراهم می کند و بنابراین اطلاعات و عملکرد را در دسترس کاربر نهایی قرار می دهد. ما می‌خواهیم کاربران فقط به ویژگی‌هایی دسترسی داشته باشند که بر اساس نیازهای سیستم ما مجاز هستند.

در حالی که امنیت در کلاینت React ما ضروری است، هر پیاده‌سازی ایمن باید ویژگی‌های امنیتی اضافی (و مسلماً اولیه) را در سرور ارائه کند تا در برابر تخلفات غیرمجاز کلاینت محافظت شود. هر اتفاقی ممکن است بیفتد و کاربران باهوش مرورگر می توانند برنامه ما را از طریق ابزارهای توسعه مرورگر اشکال زدایی کنند. اول حفاظت مهم است.

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

راه حل آسانی که نباید انتخاب کنید
طیف گسترده ای از تخصص در جامعه توسعه دهندگان React وجود دارد. بسیاری از توسعه‌دهندگان تازه‌کار React تمایل دارند از سبک‌های کدنویسی کمتر ظریف در رابطه با مسیرها و منطق دسترسی امن مرتبط پیروی کنند.

ویژگی‌های اجرای ساده‌ معمولی عبارتند از:

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

یک پیاده سازی کامپوننت مسیریابی ساده ممکن است به شکل زیر باشد:

import { useContext, useEffect } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { UserContext } from '../UserContext'

export default function NaiveApproach() {
  const { loggedIn } = useContext(UserContext)
  const navigate = useNavigate()

  useEffect(() => {
    // Check if the user is logged in (after the page loads)
    // If they're not, redirect them to the homepage
    if (!loggedIn) navigate('/access-denied')
  })

  return (
    <div>Page content...</div>
  )
}

یک برنامه از این کامپوننت مسیریابی مانند زیر استفاده می کند:

export default function App() {
  return (
    <Router>
      <Routes>
        {/* Method 1: Using `useEffect()` as a redirect */}
        <Route path="/naive-approach" element={<NaiveApproach />} />
      </Routes>
    </Router>
  )
}

این رویکرد اغلب اجرا می شود، اما باید از آن اجتناب شود، زیرا عملکرد سیستم را هدر می دهد و پایگاه کاربر ما را آزار می دهد. مسیریابی ساده سه کار را انجام می دهد:

• بر عملکرد برنامه ما تأثیر منفی می گذارد.
  سایر هوک های useEffect به طور بالقوه می توانند قبل از تغییر مسیر در React اجرا شوند.
  می‌توانیم شاهد کاهش سرعت سیستم ناشی از درخواست‌های غیر ضروری سمت سرور باشیم. بسته به تعداد بلوک‌های منطقی که قبل از اجرای بررسی‌های امنیتی با آن‌ها مواجه می‌شوید، کاهش ۷۵ درصدی یا بیشتر جای تعجب ندارد.
   
• به طور بالقوه باعث فلیکر زدن سایت یا صفحه می شود.
  از آنجایی که صفحه محافظت شده ابتدا بارگیری می شود، به طور خلاصه به آدرس وب درخواستی هدایت می شود اما بسته به منطق امنیت صفحه ممکن است تغییر مسیر دهد.
   
• منطق مسیریابی امن را در همه جا کپی کنید.
  این پیاده سازی منطق مسیریابی در هر صفحه محافظت شده در برنامه ما باعث ایجاد کابوس تعمیر و نگهداری می شود.

مسیریابی React بهتر با کامپوننت سفارشی

ما می خواهیم مسیریابی ایمن خود را زیباتر کنیم. سه چیز که به ما کمک می کند تا به پیاده سازی بهتری دست یابیم، به حداقل رساندن نگهداری کد، متمرکز کردن منطق مسیریابی امن برای به حداقل رساندن تأثیر کد و بهبود عملکرد برنامه است.

ما یک کامپوننت ProtectedRoute سفارشی را برای دستیابی به این اهداف پیاده سازی می کنیم:

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

/**
 * Only allows navigation to a route if a condition is met.
 * Otherwise, it redirects to a different specified route.
 */
export default function ConditionalRoute({
  condition,
  redirectTo,
  children,
}: ConditionalRouteProps): JSX.Element {
  return condition ? <>{children}</> : <Navigate to={redirectTo} replace />
}

export type ConditionalRouteProps = {
  /**
   * Route is created if its condition is true.
   * For example, `condition={isLoggedIn}` or `condition={isAdmin}`
   */
  condition: boolean

  /** The route to redirect to if `condition` is false */
  redirectTo: string

  children?: ReactNode
}

کد برنامه ما برای استفاده از کامپوننت جدید ConditionalRoute نیاز به تنظیم دارد:

export default function App() {
  return (
    <Router>
      <Routes>
       {/* Method 2: Using ConditionalRoute (better, but verbose) */}
        <Route
          path="/custom-component"
          element={
            <ConditionalRoute condition={isLoggedIn} redirectTo=”/”>
              <CustomComponentPage />
            </ConditionalRoute>
          }
        />
      </Routes>
    </Router>
  )
}

این پیاده سازی به طور قابل توجهی بهتر از راه حل ساده و ساده ای است که قبلاً ارائه شد زیرا:

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

بهترین راه حل روتر React

ما یک پیاده‌سازی واقعاً بهتر و با مرتبه بالاتر می‌خواهیم که به اوج امنیت مسیر بسیار کامپوننتی، استفاده از پارامترها و حداقل تأثیر بر صفحاتی که نیاز به مسیریابی دارند برسد. ما کامپوننتی نوشته و کم‌تاثیر خود، GrandFinaleRoute را معرفی می‌کنیم:

/** A higher-order component with conditional routing logic */
export function withCondition(
  Component: FunctionComponent,
  condition: boolean,
  redirectTo: string
) {
  return function InnerComponent(props: any) {
    return condition ? <Component {...props} /> : <Navigate to={redirectTo} replace />
  }
}

/** A more specific variation */
export const withLoggedIn = (Component: React.FunctionComponent) =>
  withCondition(Component, useContext(UserContext).loggedIn, '/home')

این کامپوننت مسیریابی ایمن نه تنها تمام نیازهای ما را برآورده می کند، بلکه امکان استفاده ظریف و مختصر را بدون کامپوننت صفحه ما نیز فراهم می کند:

const GrandFinaleRoute = withLoggedIn(HigherOrderComponentPage)

export default function App() {
  return (
    <Router>
      <Routes>
        {/* Method 3: Using a higher-order component */}
        {/* (The best of both worlds!) */}
        <Route path="/grand-finale" element={<GrandFinaleRoute />} />
      </Routes>
    </Router>
  )
}

GrandFinaleRoute به طور مختصر کدگذاری شده است، منابع کارآمد و عملکردی دارد، بنابراین به همه اهداف ما دست می یابد.

نتیجه

پیاده‌سازی مسیریابی برنامه‌ها را می‌توان مانند هر کد دیگری ساده یا با ظرافت کدگذاری کرد. ما اصول مسیریابی را به عنوان کاوش کامل کد برای پیاده سازی های ساده و پیچیده مبتنی بر React Router بررسی کرده ایم.

امیدوارم رویکرد مسیریابی نهایی با تمایل شما برای آوردن یک راه حل مسیریابی زیبا و کم هزینه به برنامه شما طنین انداز شود. صرف نظر از روش، می‌توانید با مقایسه آن با نمونه‌های مختلف ما، به سرعت اثربخشی و امنیت پیاده‌سازی مسیریابی خود را درجه‌بندی کنید. مسیریابی در React نباید یک مسیر سربالایی باشد. با خیال راحت نکات، تجربیات و بهترین شیوه های React Router خود را در بخش نظرات به اشتراک بگذارید.