اپلیکیشن های تک صفحه ای (SPA) با عادت کردن مردم به تجربیات کاربری بهتر و بهبود پاسخگویی برنامه ها، محبوبیت بیشتری پیدا کرده اند. این تا حدی به لطف معرفی مسیریابی سمت مشتری (CSR) است.

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

مزایای استفاده از CSR در ساخت اپلیکیشن های تک صفحه ای عبارتند از:

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

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

درخواست‌های چند صفحه‌ای که توسط سرور انجام می‌شود را کاهش می‌دهد و در نتیجه استفاده از پهنای باند کمتر و زمان پاسخگویی سریع‌تر می‌شود.

React، محبوب ترین کتابخانه برای ساخت رابط های کاربری پویا و پیچیده، CSR را از طریق React Router فعال می کند. React Router یک کتابخانه شخص ثالث است که ناوبری و مسیریابی را در برنامه های React مدیریت می کند. شرکت‌های بزرگی مانند Shopify، Spotify، Mozilla و Gumroad (به نام چند مورد) از React Router در وب‌سایت‌های خود استفاده می‌کنند.

در این مقاله، انواع مسیریابی به کار رفته در برنامه های وب React را تحلیل خواهیم کرد: مسیریابی Relative و Dynamic .

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

پیش نیاز

برای درک کامل آنچه در این مقاله به آن خواهیم پرداخت، باید دانش اولیه React Routing را داشته باشید.

اگر نیاز به تحلیل دارید، می توانید مقاله من در React Router را بخوانید. اگر آماده هستید، پس بیایید مستقیماً به آن بپریم!

مسیریابی نسبی

مسیریابی نسبی راهی برای تعریف مسیرها با اشاره به مسیرهای اصلی آنه است. پیمایش به مسیرها یا مسیرهای مختلف در یک برنامه را بر اساس مکان فعلی به جای یک نقطه مشخص که معمولاً ریشه برنامه است، امکان پذیر می کند.

مسیریابی نسبی با مسیرهای نسبی کار می کند که مکان یک جزء را در رابطه با مسیر والد مشخص می کند. همچنین می توان بيان کرد که مسیرهای نسبی به زمینه حساس هستند.

در اینجا یک مثال ساده از مسیریابی نسبی با استفاده از مسیرهای نسبی آورده شده است:

 < Routes > < Route path = "/" element = { < Home /> } /> < Route path = "about" element = { < About /> } /> </ Routes > ;

مسیر مسیر ریشه / مولفه Home را ارائه می دهد.

<Route path="about" element={<About />} /> یک مسیر نسبی است که مسیر نسبی about را تعریف می کند. نسبی است زیرا مسیر ریشه / را به عنوان والد خود در نظر می گیرد.

در ساختار مسیر نسبی تو در تو، به همان روش کار می کند و همچنان به مسیر اصلی خود اضافه می شود.

 < Routes > < Route path = "/" element = { < Home /> } /> < Route path = "about" element = { < About /> } /> < Route path = "dashboard" element = { < Dashboard /> }> <Route path="profile" element={<Profile />} /> </Route> </Routes>;

مسیر Dashboard که dashboard مسیر را تعریف می کند همچنان یک مسیر نسبی باقی می ماند.

مسیر Profile که profile مسیر را تعریف می کند در مسیر dashboard تو در تو قرار دارد که آن را با مسیر dashboard نسبت می دهد. مسیر کامل Profile اکنون /dashboard/profile خواهد بود.

مسیریابی مطلق

مسیریابی مطلق مشابه مسیریابی نسبی است اما با کمی تفاوت. مسیرهای مطلق در یک برنامه کاربردی را می توان به طور مشخص با علامت اسلش (/) متمایز کرد. اسلش اصلی نام مسیر را پیشوند می دهد و نشان می دهد که مسیر از سطح ریشه برنامه در نظر گرفته می شود.

 < Routes > < Route path = "/" element = { < Home /> } /> < Route path = "/about" element = { < About /> } /> </ Routes > ;

about یک مسیر مطلق است که یک about مطلق را تعریف می کند و مستقیماً به ریشه برنامه ارجاع می دهد.

در ساختار مسیر تودرتو مطلق، به صورت زیر به نظر می رسد:

 < Routes > < Route path = "/" element = { < Home /> } /> < Route path = "/about" element = { < About /> } /> < Route path = "/dashboard" element = { < Dashboard /> }> <Route path="/dashboard/profile" element={<Profile />} /> </Route> </Routes>;

مسیر نمایه profile مسیر /dashboard/profile را به عنوان یک مسیر مطلق تعریف می‌کند و زمانی که URL با /dashboard/profile مطابقت دارد، مؤلفه Profile را ارائه می‌کند.

تفاوت بین مسیریابی نسبی و مطلق

انعطاف پذیری: مسیریابی نسبی برای ساختارهای مسیر تودرتو انعطاف پذیرتر است زیرا مسیرهای نسبی به طور خودکار با تغییرات مسیرهای والد سازگار می شوند. برای مسیریابی مطلق، تغییرات ایجاد شده در مسیرهای والد نیاز به به‌روزرسانی همه مسیرهای فرزند دارد.

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

وضوح: در ساختار مسیر تودرتو، درک ساختار سلسله مراتبی در مسیریابی نسبی می تواند مشکل باشد. در مسیریابی مطلق بسیار ساده تر است، زیرا مسیرها برای مسیرهای غیر تودرتو واضح، مختصر و مستقیم هستند.

مسیریابی پویا

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

مسیریابی پویا مسیرهایی را تعریف می کند که می توانند بر اساس پارامترهای خاصی با استفاده از پارامترهای مسیر یا بخش های URL تغییر کنند. پارامترهای اضافه شده به مسیر مسیر به برنامه اجازه می دهد تا مسیرها را به صورت پویا مدیریت کند و عناصر مختلف را بر اساس URL ارائه دهد، همانطور که در مثال زیر مشاهده می کنید:

 < Routes > < Route path = "/" element = { < Home /> } /> < Route path = "/about" element = { < About /> } /> < Route path = "/dashboard" element = { < Dashboard /> }> <Route path="profile/:id" element={<Profile />} /> </Route> </Routes>;

مسیر Profile با بخش پویا :id مطابق با profile/:id . مطابقت های احتمالی برای این مسیر پویا می تواند profile/123 یا profile/abc123 باشد.

مثال بالا مسیریابی نسبی با مسیریابی پویا را نشان می دهد. همچنین می توانیم از مسیریابی مطلق با مسیریابی پویا استفاده کنیم:

 < Routes > < Route path = "/" element = { < Home /> } /> < Route path = "/about" element = { < About /> } /> < Route path = "/dashboard" element = { < Dashboard /> }> <Route path="/dashboard/profile/:id" element={<Profile />} /> </Route> </Routes>;

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

انعطاف پذیری: توانایی تعریف مسیر مسیر بر اساس یک پارامتر، مسیرهای پویا را انعطاف پذیر و پاسخگو به تعامل کاربر می کند. مسیرهای استاتیک ثابت هستند و تغییر نمی کنند.

پیچیدگی: مسیرهای پویا اغلب شامل بخش‌های پویا مانند پارامترها و منطق شرطی هستند که درک آن‌ها دشوار است. مسیرهای استاتیک ساده و غیر پیچیده هستند.

Use Case: مسیرهای پویا برای صفحاتی استفاده می شود که به ورودی یا داده های کاربر بستگی دارد. مسیرهای ثابت برای صفحاتی که تغییر نمی کنند استفاده می شود.

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

اگر می‌خواهید یک سیستم ناوبری پیچیده‌تر یا قوی‌تر ایجاد کنید که شامل ساختارهای مسیر سلسله مراتبی و تودرتو باشد، بهتر است مسیریابی نسبی و پویا را ترکیب کنید.

ترکیب هر دو روش مسیریابی به صورت زیر است:

 < Routes > < Route > <Route path="/categories" element={<Categories />}> <Route path=":categoryId" element={<CategoryDetails />}> <Route path="product/:productId" element={<ProductDetails />} /> </Route> </Route> </Route> </Routes>;

این مثال ساختار مسیر عمیقا تو در تو را با مسیرهای نسبی و پویا نشان می دهد.

مسیر تطبیق کامل /categories/:categoryId/product/:productId خواهد بود.

مزایای ترکیب مسیریابی نسبی و پویا

انعطاف پذیری: ترکیبی از مسیریابی نسبی و پویا در ساخت یک ساختار ناوبری قوی بهترین است. این به این دلیل است که دارای انعطاف پذیری و تطبیق پذیری برای تعریف مسیرهای خاص به طور نسبی و سایر مسیرهای ایجاد شده به صورت پویا بر اساس داده ها یا ورودی های کاربر است.

تجربه کاربری پیشرفته: روش های مسیریابی ترکیبی بهترین هر دو روش را در طول تعامل در اختیار کاربران قرار می دهد و آنها را راضی می کند.

نتیجه گیری

در این مقاله به تحلیل مسیریابی در برنامه های وب React پرداختیم و با روش های مسیریابی مورد استفاده در React Router آشنا شدیم: مسیریابی نسبی و پویا. هر دو نقش مهمی در مسیریابی سمت کلاینت در برنامه های React ایفا می کنند و بسته به موارد استفاده مزایای متفاوتی را ارائه می دهند.

درک و پیاده‌سازی این روش‌های مسیریابی می‌تواند تجربه کاربر را بالا ببرد و برنامه React شما را هم قابل نگهداری و هم مقیاس‌پذیر کند.

اگر از خواندن این مقاله لذت بردید، می توانید برای من یک قهوه بخرید .

همچنین می‌توانید برای پست‌ها و مقالات بیشتر با من در لینکدین ارتباط برقرار کنید.

در قسمت بعدی می بینمت!

خبرکاو