Nalutas: tumugon sa router gamit ang mga estilo mula sa pampublikong folder

Ang pangunahing problema na nauugnay sa React Router gamit ang mga estilo mula sa pampublikong folder ay maaaring mahirap subaybayan ang mga estilo at tiyaking nailapat ang mga ito nang tama. Dahil ang pampublikong folder ay hindi bahagi ng React component tree, maaaring mahirap malaman kung aling mga estilo ang inilalapat at kung kailan. Bukod pa rito, kung maraming bahagi ang gumagamit ng parehong istilo mula sa pampublikong folder, maaaring mahirap i-debug ang anumang mga isyu na lalabas.

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. import React mula sa 'react'; // Pag-import ng React library
2. i-import ang { BrowserRouter bilang Router, Route } mula sa 'react-router-dom'; // Pag-import ng mga bahagi ng BrowserRouter at Route mula sa react-router-dom library
3. mag-import ng { createGlobalStyle } mula sa 'styled-components'; // Pag-import ng createGlobalStyle function mula sa naka-istilong bahagi ng library
4. mag-import ng HomePage mula sa './pages/HomePage'; // Pag-import ng bahagi ng HomePage
5. mag-import ng AboutPage mula sa './pages/AboutPage'; // Pag-import ng bahagi ng AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Mga pandaigdigang istilo para sa buong app. Ilalapat ito sa lahat ng sangkap.
7. const App = () => (…); // Ang pangunahing bahagi ng app. Dito natukoy ang lahat ng ruta.
8. ; // Pagtukoy ng ruta na may eksaktong landas ng "/" na nagre-render ng bahagi ng HomePage
9. ; // Pagtukoy ng ruta na may landas na "/tungkol sa" na nagre-render ng bahagi ng AboutPage
10 i-export ang default na App;// I-export ang App bilang default

Paggamit ng Mga Estilo

Maaaring gamitin ang mga istilo sa React Router upang i-customize ang hitsura at pakiramdam ng application. Maaaring gamitin ang mga istilo upang lumikha ng mga custom na bahagi, magdagdag ng mga animation, at higit pa. Magagamit din ang mga istilo para gumawa ng mga tumutugong layout na umaangkop sa iba't ibang laki ng screen. Bukod pa rito, maaaring gamitin ang mga istilo upang lumikha ng mga tema para sa application na nagbibigay-daan sa mga user na i-customize ang kanilang karanasan.

Gamit ang Pampublikong Folder

Ang pampublikong folder sa React Router ay isang espesyal na folder na maaaring magamit upang mag-imbak ng mga static na file tulad ng mga imahe, CSS, at JavaScript. Direktang inihahatid ang mga file na ito mula sa pampublikong folder nang hindi pinoproseso ng React application. Nagbibigay-daan ito para sa mas mabilis na mga oras ng pag-load at ginagawang mas madali ang pamamahala ng mga asset sa maraming page ng isang application. Nagbibigay din ang pampublikong folder ng paraan upang panatilihing wala sa mga system ng pagkontrol ng bersyon ang ilang partikular na file tulad ng Git, na makakatulong sa pagpapanatili ng seguridad at privacy.

Paano ako mag-i-import ng CSS file mula sa pampublikong folder sa React

Sa React Router, maaari kang mag-import ng CSS file mula sa pampublikong folder sa pamamagitan ng paggamit ng bahagi ng Link. Binibigyang-daan ka ng component ng Link na tumukoy ng path sa file sa attribute na href. Halimbawa:

I-import nito ang styles.css file mula sa iyong pampublikong folder papunta sa iyong React Router application.