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

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

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

شروع به کار: مبانی مسیریابی اعلامی

مسیریابی اعلامی سبک کدنویسی است که در روتر React و React استفاده می شود. مسیرهای اعلامی 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> باید a <Route>. این می تواند برخی از روش های قبلی را برای سازماندهی و ترکیب مسیرها شکست دهد.

ادامه این مقاله الگوهای مختلف سازگار با v6 را بررسی می کند و با ترکیب نهایی و زیباترین مسیر ما به پایان می رسد. برای اطلاعات بیشتر در مورد ارتقا از نسخه 5 به نسخه 6، بررسی کنید راهنمای رسمی مهاجرت.

زمان راه اندازی یک برنامه اصلی React است

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

npm create [email protected] redirect-app -- --template react-ts

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

React Routes Basics

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

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

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

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

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

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

راه حل آسانی که نباید انتخاب کنید

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

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

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

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

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>
  )
}

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

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

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

ما می خواهیم مسیریابی ایمن خود را زیباتر کنیم. سه چیز که به ما کمک می کند تا به پیاده سازی بهتری دست یابیم، به حداقل رساندن نگهداری کد، متمرکز کردن منطق مسیریابی امن برای به حداقل رساندن تأثیر کد و بهبود عملکرد برنامه است. ما یک سفارشی را اجرا می کنیم 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 Achieved

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

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

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

ادامه مطلب در وبلاگ مهندسی تاپتال: