حل کیا گیا: جامد طرزوں کا استعمال کرتے ہوئے روٹر کا رد عمل

ری ایکٹ راؤٹر کے ساتھ سٹیٹک اسٹائلز کے استعمال سے متعلق اہم مسئلہ یہ ہے کہ مختلف راستوں اور ان سے وابستہ اسٹائلز کا ٹریک رکھنا مشکل ہوسکتا ہے۔ جامد طرزوں کے ساتھ، ہر روٹ کے لیے اپنے سی ایس ایس کے قواعد کا ایک سیٹ ہونا ضروری ہے، جو تیزی سے ناقابل برداشت اور برقرار رکھنا مشکل ہو سکتا ہے۔ مزید برآں، اگر ایک سٹائل کو متعدد راستوں میں استعمال کیا جاتا ہے، تو اسے ان سب میں ڈپلیکیٹ کرنے کی ضرورت ہوتی ہے، جس سے کوڈ DRY (اپنے آپ کو نہ دہرائیں) رکھنا مشکل ہو جاتا ہے۔

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import styled from 'styled-components';
 
const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;

  &:hover {
    color: white;
    text-decoration: none;  
  }  
`;

 const App = () => (   <Router>     <div>       <ul>         <li><StyledLink to="/">Home</StyledLink></li>         <li><StyledLink to="/about">About</StyledLink></li>       </ul>       <hr />       <Route exact path="/" component={Home} />       <Route path="/about" component={About} />     </div>   </Router>) ;

 const Home = () => (   <div>     <h2>Home</h2>   </div>) ;

 const About = () => (   <div>     <h2>About</h2>   </div>) ;

 export default App;

1. پہلی لائن ری ایکٹ لائبریری کو درآمد کرتی ہے۔
2. دوسری لائن براؤزر راؤٹر، روٹ، اور لنک کے اجزاء کو ری ایکٹ-روٹر-ڈوم لائبریری سے درآمد کرتی ہے۔
3. تیسری لائن اسٹائل شدہ اجزاء کی لائبریری سے اسٹائل شدہ اجزاء درآمد کرتی ہے۔
4. چوتھی لائن ری ایکٹ-روٹر-ڈوم سے درآمد کردہ لنک جزو کا استعمال کرتے ہوئے ایک اسٹائلڈ لنک جزو بناتی ہے اور اسے رنگ: پیلیولیٹیڈ اور فونٹ-ویٹ: بولڈ کے ساتھ اسٹائل کرتی ہے، نیز ایک ہوور اثر جو اس کا رنگ سفید میں بدلتا ہے اور کسی بھی متن کو ہٹا دیتا ہے۔ سجاوٹ جب اوپر منڈلا جاتا ہے۔
5. پانچویں لائن ایپ کا ایک جزو بناتی ہے جو ایک راؤٹر کے جزو کو اس کے اندر دو روٹ اجزاء کے ساتھ پیش کرتی ہے (ایک گھر کے لیے اور ایک کے بارے میں)۔ یہ دو لنکس (ہوم ​​اور اس کے بارے میں) کی ایک غیر ترتیب شدہ فہرست بھی پیش کرتا ہے جو اسٹائلڈ لنک کے اجزاء کو استعمال کرتے ہوئے ان کے اوپر لائن 4 میں بنائے گئے ہیں اور دونوں کو اسٹائلنگ کے مقاصد کے لیے ایچ آر ٹیگ سے الگ کیا گیا ہے۔
6. لائنز 8 - 11 دو فنکشنل اجزاء بناتے ہیں جسے ہوم کہتے ہیں اور اس کے بارے میں جو ان کے اندر ان کے متعلقہ ناموں کے ساتھ h2 ٹیگ پیش کرتے ہیں جب ان دونوں کے اوپر لائن 5 میں ان کے متعلقہ روٹ اجزاء کے ذریعہ پکارا جاتا ہے (ہوم ​​"گھر" کو رینڈر کرتا ہے جبکہ "کے بارے میں" رینڈر کرتا ہے۔ )۔
7. آخر میں، لائن 12 ایپ کے جزو کو برآمد کرتی ہے تاکہ ضرورت پڑنے پر اسے ہماری درخواست میں کہیں اور استعمال کیا جا سکے۔

جامد طرزیں

ری ایکٹ راؤٹر میں جامد طرزیں وہ طرزیں ہیں جو کسی جزو پر لاگو ہوتی ہیں اور جزو کی حالت یا پرپس میں کسی بھی تبدیلی سے قطع نظر وہی رہتی ہیں۔ یہ متحرک سٹائل کے برعکس ہے، جو کسی جزو کی حالت یا پروپس کے لحاظ سے تبدیل ہوتے ہیں۔ جامد طرزوں کا استعمال کسی ایپلیکیشن میں ایک مستقل شکل اور احساس پیدا کرنے کے لیے کیا جا سکتا ہے، اور ساتھ ہی ساتھ ڈیولپرز کے لیے اجزاء کو تیزی سے اسٹائل کرنے کا ایک آسان طریقہ فراہم کرتا ہے جب بھی کوئی تبدیلی ہوتی ہے اسے دستی طور پر ایڈجسٹ کیے بغیر۔

اسٹائل شدہ اجزاء کا پیکیج

اسٹائلڈ کمپونینٹس ری ایکٹ راؤٹر کے لیے ایک مقبول پیکیج ہے جو ڈویلپرز کو اپنی React ایپلی کیشنز میں اجزاء کی سطح کی طرزیں بنانے اور ان کا نظم کرنے کی اجازت دیتا ہے۔ یہ سی ایس ایس کوڈ لکھنے کا ایک آسان طریقہ فراہم کرتا ہے جس کا دائرہ کسی ایک جزو تک ہے، جس سے اسے برقرار رکھنے اور ڈیبگ کرنا آسان ہو جاتا ہے۔ اسٹائل شدہ اجزاء متعدد اجزاء میں اسٹائل کا اشتراک کرنے کے ساتھ ساتھ تھیمنگ کے لیے تعاون فراہم کرنا بھی آسان بناتے ہیں۔ مزید برآں، اسٹائلڈ اجزاء کو ری ایکٹ راؤٹر کے لنک جزو کے ساتھ استعمال کیا جا سکتا ہے، جس سے ڈویلپرز کو ان کی ایپلی کیشن میں لنکس کو اسٹائل کرنے کی اجازت ملتی ہے۔

جامد طرزیں استعمال کرنے کا طریقہ

ان لائن اسٹائل انتساب کا استعمال کرکے ری ایکٹ راؤٹر میں جامد طرزیں استعمال کی جا سکتی ہیں۔ یہ وصف آپ کو الگ اسٹائل شیٹ کی ضرورت کے بغیر کسی عنصر پر براہ راست اسٹائل لگانے کی اجازت دیتا ہے۔ ری ایکٹ راؤٹر میں جامد طرزیں استعمال کرنے کے لیے، آپ کو ایک اسٹائل آبجیکٹ بنانا ہوگا اور پھر اسے جزو کے اسٹائل پروپ کے لیے دلیل کے طور پر پاس کرنا ہوگا۔ مثال کے طور پر:

const myStyle = {
پس منظر کا رنگ: '#f2f2f2'،
فونٹ سائز: '20px'،
رنگ: '#000'
};

متعلقہ اشاعت:

ایک کامنٹ دیججئے