ಪರಿಹರಿಸಲಾಗಿದೆ: ಸಾರ್ವಜನಿಕ ಫೋಲ್ಡರ್‌ನಿಂದ ಶೈಲಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ರಿಯಾಕ್ಟ್ ರೂಟರ್

ಸಾರ್ವಜನಿಕ ಫೋಲ್ಡರ್‌ನಿಂದ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಬಳಸುವ ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ಗೆ ಸಂಬಂಧಿಸಿದ ಮುಖ್ಯ ಸಮಸ್ಯೆ ಎಂದರೆ ಶೈಲಿಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವುದು ಮತ್ತು ಅವುಗಳನ್ನು ಸರಿಯಾಗಿ ಅನ್ವಯಿಸಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಕಷ್ಟಕರವಾಗಿರುತ್ತದೆ. ಸಾರ್ವಜನಿಕ ಫೋಲ್ಡರ್ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯ ಭಾಗವಾಗಿಲ್ಲದಿರುವುದರಿಂದ, ಯಾವ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಯಾವಾಗ ಎಂದು ತಿಳಿಯುವುದು ಕಷ್ಟಕರವಾಗಿರುತ್ತದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಸಾರ್ವಜನಿಕ ಫೋಲ್ಡರ್‌ನಿಂದ ಅನೇಕ ಘಟಕಗಳು ಒಂದೇ ಶೈಲಿಯನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ಉದ್ಭವಿಸುವ ಯಾವುದೇ ಸಮಸ್ಯೆಗಳನ್ನು ಡೀಬಗ್ ಮಾಡಲು ಕಷ್ಟವಾಗುತ್ತದೆ.

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 ಅನ್ನು ರೂಟರ್, ಮಾರ್ಗ } ಆಮದು ಮಾಡಿ; // ರಿಯಾಕ್ಟ್-ರೂಟರ್-ಡಾಮ್ ಲೈಬ್ರರಿಯಿಂದ ಬ್ರೌಸರ್ ರೂಟರ್ ಮತ್ತು ರೂಟ್ ಘಟಕಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುವುದು
3. ಆಮದು { createGlobalStyle } ಅನ್ನು 'ಶೈಲಿಯ-ಘಟಕಗಳಿಂದ'; // ಶೈಲಿಯ-ಘಟಕಗಳ ಲೈಬ್ರರಿಯಿಂದ createGlobalStyle ಕಾರ್ಯವನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲಾಗುತ್ತಿದೆ
4. './pages/HomePage' ನಿಂದ ಮುಖಪುಟವನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಿ; // ಮುಖಪುಟ ಘಟಕವನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲಾಗುತ್ತಿದೆ
5. './pages/AboutPage' ನಿಂದ AboutPage ಅನ್ನು ಆಮದು ಮಾಡಿ; // AboutPage ಘಟಕವನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲಾಗುತ್ತಿದೆ
6. const GlobalStyle = createGlobalStyle`...`; // ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಾಗಿ ಜಾಗತಿಕ ಶೈಲಿಗಳು. ಇದನ್ನು ಎಲ್ಲಾ ಘಟಕಗಳಿಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.
7. const ಅಪ್ಲಿಕೇಶನ್ = () => (...); // ಅಪ್ಲಿಕೇಶನ್‌ನ ಮುಖ್ಯ ಅಂಶ. ಇಲ್ಲಿಯೇ ಎಲ್ಲಾ ಮಾರ್ಗಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ.
8. ; // ಹೋಮ್‌ಪೇಜ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ನಿರೂಪಿಸುವ “/” ನ ನಿಖರವಾದ ಮಾರ್ಗದೊಂದಿಗೆ ಮಾರ್ಗವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು
9. ; // AboutPage ಘಟಕವನ್ನು ನಿರೂಪಿಸುವ "/about" ನ ಮಾರ್ಗದೊಂದಿಗೆ ಮಾರ್ಗವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು
10 ರಫ್ತು ಡೀಫಾಲ್ಟ್ ಅಪ್ಲಿಕೇಶನ್;// ಡೀಫಾಲ್ಟ್ ಆಗಿ ರಫ್ತು ಮಾಡುವ ಅಪ್ಲಿಕೇಶನ್

ಶೈಲಿಗಳನ್ನು ಬಳಸುವುದು

ಅಪ್ಲಿಕೇಶನ್‌ನ ನೋಟ ಮತ್ತು ಭಾವನೆಯನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಲ್ಲಿ ಶೈಲಿಗಳನ್ನು ಬಳಸಬಹುದು. ಕಸ್ಟಮ್ ಘಟಕಗಳನ್ನು ರಚಿಸಲು, ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಸೇರಿಸಲು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಮಾಡಲು ಶೈಲಿಗಳನ್ನು ಬಳಸಬಹುದು. ವಿಭಿನ್ನ ಪರದೆಯ ಗಾತ್ರಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಸ್ಟೈಲ್‌ಗಳನ್ನು ಸಹ ಬಳಸಬಹುದು. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಬಳಕೆದಾರರು ತಮ್ಮ ಅನುಭವವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಅನುಮತಿಸುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಾಗಿ ಥೀಮ್‌ಗಳನ್ನು ರಚಿಸಲು ಶೈಲಿಗಳನ್ನು ಬಳಸಬಹುದು.

ಸಾರ್ವಜನಿಕ ಫೋಲ್ಡರ್ ಅನ್ನು ಬಳಸುವುದು

ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಲ್ಲಿರುವ ಸಾರ್ವಜನಿಕ ಫೋಲ್ಡರ್ ಚಿತ್ರಗಳು, CSS ಮತ್ತು JavaScript ನಂತಹ ಸ್ಥಿರ ಫೈಲ್‌ಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು ಬಳಸಬಹುದಾದ ವಿಶೇಷ ಫೋಲ್ಡರ್ ಆಗಿದೆ. ಈ ಫೈಲ್‌ಗಳನ್ನು ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ನಿಂದ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸದೆ ಸಾರ್ವಜನಿಕ ಫೋಲ್ಡರ್‌ನಿಂದ ನೇರವಾಗಿ ನೀಡಲಾಗುತ್ತದೆ. ಇದು ವೇಗವಾಗಿ ಲೋಡ್ ಮಾಡುವ ಸಮಯವನ್ನು ಅನುಮತಿಸುತ್ತದೆ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ನ ಬಹು ಪುಟಗಳಲ್ಲಿ ಸ್ವತ್ತುಗಳನ್ನು ನಿರ್ವಹಿಸುವುದನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ. ಸಾರ್ವಜನಿಕ ಫೋಲ್ಡರ್ Git ನಂತಹ ಆವೃತ್ತಿ ನಿಯಂತ್ರಣ ವ್ಯವಸ್ಥೆಗಳಿಂದ ಕೆಲವು ಫೈಲ್‌ಗಳನ್ನು ಹೊರಗಿಡಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ಸುರಕ್ಷತೆ ಮತ್ತು ಗೌಪ್ಯತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿರುವ ಸಾರ್ವಜನಿಕ ಫೋಲ್ಡರ್‌ನಿಂದ ನಾನು CSS ಫೈಲ್ ಅನ್ನು ಹೇಗೆ ಆಮದು ಮಾಡಿಕೊಳ್ಳುವುದು

ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಲ್ಲಿ, ಲಿಂಕ್ ಘಟಕವನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಸಾರ್ವಜನಿಕ ಫೋಲ್ಡರ್‌ನಿಂದ CSS ಫೈಲ್ ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಬಹುದು. ಲಿಂಕ್ ಘಟಕವು href ಗುಣಲಕ್ಷಣದಲ್ಲಿ ಫೈಲ್‌ಗೆ ಮಾರ್ಗವನ್ನು ಸೂಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ:

ಇದು ನಿಮ್ಮ ಸಾರ್ವಜನಿಕ ಫೋಲ್ಡರ್‌ನಿಂದ styles.css ಫೈಲ್ ಅನ್ನು ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಆಮದು ಮಾಡುತ್ತದೆ.