حل شدہ: عوامی فولڈر سے اسٹائل کا استعمال کرتے ہوئے روٹر کو رد کریں۔

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

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { createGlobalStyle } from 'styled-components';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
 
const GlobalStyle = createGlobalStyle` 
    body { 
        margin: 0; 

        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 
            "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 
            sans-serif;

        -webkit-font-smoothing: antialiased;

        -moz-osx-font-smoothing: grayscale;  

    }  

    code {  font-family: sourcecode pro, Menlo, Monaco, Consolas, Courier New, monospace; }  

    *{ boxsizing: borderbox;}  

    img{ maxwidth: 100%;}  

    a{ textdecoration : none;}     `; // Global styles for the entire app. This will be applied to all components. 
     const App = () => ( // The main component of the app. This is where all routes are defined.      <Router>       <div>         <GlobalStyle />          <Route exact path="/" component={HomePage} />          <Route path="/about" component={AboutPage} />       </div>     </Router> ); export default App;

1. 'رد عمل' سے رد عمل درآمد کریں؛ // ری ایکٹ لائبریری کو درآمد کرنا
2. 'react-router-dom' سے { BrowserRouter بطور راؤٹر، روٹ } درآمد کریں؛ // react-router-dom لائبریری سے BrowserRouter اور Route اجزاء درآمد کرنا
3. درآمد کریں { createGlobalStyle } کو 'اسٹائل والے اجزاء' سے؛ // اسٹائلڈ اجزاء کی لائبریری سے createGlobalStyle فنکشن کو درآمد کرنا
4. './pages/HomePage' سے ہوم پیج درآمد کریں؛ // ہوم پیج جز کو درآمد کرنا
5. './pages/AboutPage' سے AboutPage درآمد کریں؛ // AboutPage جز کو درآمد کرنا
6. const GlobalStyle = createGlobalStyle`…`; // پوری ایپ کے لیے عالمی انداز۔ یہ تمام اجزاء پر لاگو کیا جائے گا.
7. const ایپ = () => (…)؛ // ایپ کا بنیادی جزو۔ یہ وہ جگہ ہے جہاں تمام راستوں کی وضاحت کی گئی ہے۔
8. ; // "/" کے صحیح راستے کے ساتھ ایک راستے کی وضاحت کرنا جو ہوم پیج کے جزو کو پیش کرتا ہے
9. ; // "/ کے بارے میں" کے راستے کے ساتھ ایک راستے کی وضاحت کرنا جو AboutPage کے جز کو پیش کرتا ہے
10 ایکسپورٹ ڈیفالٹ ایپ؛// ایپ کو بطور ڈیفالٹ ایکسپورٹ کرنا

طرزیں استعمال کرنا

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

عوامی فولڈر کا استعمال

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

میں ری ایکٹ میں عوامی فولڈر سے سی ایس ایس فائل کیسے درآمد کروں؟

React Router میں، آپ Link component کا استعمال کر کے پبلک فولڈر سے CSS فائل امپورٹ کر سکتے ہیں۔ لنک کا جزو آپ کو href وصف میں فائل کا راستہ بتانے کی اجازت دیتا ہے۔ مثال کے طور پر:

یہ آپ کے عوامی فولڈر سے styles.css فائل کو آپ کے React Router ایپلیکیشن میں درآمد کرے گا۔