ساخت رابط کاربری پویا با React و React-Router

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

پیش نیازها

قبل از پرداختن به جزئیات React-Router، مهم است که ابتدا React و JavaScript را درک کنید. اگر تازه وارد React هستید، مستندات رسمی React را بخوانید یا در دوره React ثبت نام کنید. دانش HTML و CSS نیز مزیت دارد.

راه اندازی React-Router

برای شروع استفاده از React-Router، ابتدا باید آن را نصب کنیم. می توانید آن را با npm، مدیر بسته Node.js نصب کنید.

npm install react-router-dom

پس از نصب، می توانیم از خط زیر برای وارد کردن React-Router به کد خود استفاده کنیم:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

ایجاد مسیرها

مسیرها پایه و اساس React-Router هستند. آنها مسئول نگاشت URL ها به اجزا هستند. React-Router شامل تعدادی مولفه ایجاد مسیر است. Route، Switch، و Link بیشترین استفاده را دارند.

یک جزء مسیر برای تعیین a استفاده می شود path. به دو پارامتر نیاز دارد: path و component. path نشانی اینترنتی است که باید با مسیر مطابقت داشته باشد. وقتی URL مطابق با path، component جزء React است که باید رندر شود.

<Route path="/about" component={About} />

آ Switch مولفه چندتایی می پیچد Route اجزاء. فقط اولی Route که با URL فعلی مطابقت دارد ارائه می شود. این امر از رندر شدن بیش از یک مؤلفه به طور همزمان جلوگیری می کند.

<Switch>
  <Route path="/" exact component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</Switch>

را link جزء برای ایجاد لینک به مسیرهای مختلف استفاده می شود. فقط به یک پارامتر نیاز دارد: to، که URL است to که لینک باید به آن اشاره کند.

<Link to="/about">About</Link>

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

مسیرهایی که در مسیر دیگری ارائه می شوند، مسیرهای تودرتو نامیده می شوند. آنها هنگام ایجاد رابط های کاربری پیچیده مفید هستند. React-Router مدیریت مسیرهای تودرتو را ساده و شهودی می کند.

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

<Route path="/products" render={() => (
  <div>
    <h1>Products</h1>
    <Route path="/products/:id" component={Product} />
  </div>
)} />

ما یک مسیر والد تعریف کردیم /products و یک مسیر کودک /products/:id در مثال قبل را :id پارامتر مخفف شناسه محصول است. هنگامی که یک کاربر به /products/123، جزء Product با شناسه 123 ارائه شده است.

مدیریت احراز هویت

برنامه های کاربردی وب اغلب شامل احراز هویت می شوند. با استفاده از Redirect جزء، React-Router احراز هویت را کنترل می کند. را Redirect جزء برای هدایت کاربران به صفحه دیگری بر اساس شرایط خاص استفاده می شود.

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

function PrivateRoute({ component: Component, authenticated, ...rest }) {
  return (
    <Route {...rest} render={(props) => (
      authenticated === true
        ? <Component {...props} />
        : <Redirect to='/login' />
    )} />
  )
}

در مثال قبل، a را تعریف کردیم PrivateRoute جزء با سه پایه: component، authenticated، و rest. component نشان دهنده مولفه React است که باید رندر شود. authenticated یک مقدار بولی است که نشان می دهد آیا کاربر احراز هویت شده است یا خیر. rest ظرفی برای هر گونه وسایل اضافی است.

را Route render prop برای رندر استفاده می شود component بسته به وضعیت احراز هویت را Component در صورت احراز هویت کاربر ارائه می شود. اگر کاربر احراز هویت نشده باشد، Redirect کامپوننت کاربر را به صفحه ورود هدایت می کند.

انتقال صفحه

انتقال صفحه انیمیشن هایی هستند که وقتی کاربر بین صفحات جابجا می شود اتفاق می افتد. کتابخانه react-transition-group توسط React-Router برای مدیریت انتقال صفحه استفاده می شود.

npm install react-transition-group

پس از نصب react-transition-group کتابخانه، ما می توانیم وارد کنیم TransitionGroup و CSSTransition اجزاء.

import { TransitionGroup, CSSTransition } from 'react-transition-group';

برای فعال کردن انتقال صفحه، می‌توانیم جزء Switch خود را در جزء TransitionGroup قرار دهیم. جزء CSSTransition برای تعریف انیمیشن استفاده می شود.

<TransitionGroup>
  <CSSTransition key={location.key} classNames="fade" timeout={300}>
    <Switch location={location}>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Switch>
  </CSSTransition>
</TransitionGroup>

در مثال قبل، ما خود را پیچیده کردیم Switch جزء در الف TransitionGroup جزء. CSSTransition's key prop تنظیم شده است location.key برای اطمینان از اینکه انیمیشن هنگام تغییر مکان فعال می شود. برای تعریف انیمیشن، classNames prop تنظیم شده است fade. را timeout prop تنظیم شده است 300 milliseconds برای مشخص کردن مدت زمان انیمیشن

نتیجه

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