Решено: реагује рутер користећи стилове из јавне фасцикле

Главни проблем везан за Реацт Роутер који користи стилове из јавне фасцикле је тај што може бити тешко пратити стилове и осигурати да се правилно примењују. Пошто јавна фасцикла није део Реацт стабла компоненти, може бити тешко знати који стилови се примењују и када. Поред тога, ако више компоненти користи исти стил из јавне фасцикле, може бити тешко отклонити све проблеме који се појаве.

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. импорт { БровсерРоутер ас Роутер, Роуте } из 'реацт-роутер-дом'; // Увоз компоненти БровсерРоутер и Роуте из библиотеке реацт-роутер-дом
3. импорт { цреатеГлобалСтиле } из 'стилед-цомпонентс'; // Увоз функције цреатеГлобалСтиле из библиотеке стилизованих компоненти
4. увезите почетну страницу из './пагес/ХомеПаге'; // Увоз компоненте ХомеПаге
5. импорт АбоутПаге из './пагес/АбоутПаге'; // Увоз компоненте АбоутПаге
6. цонст ГлобалСтиле = цреатеГлобалСтиле`…`; // Глобални стилови за целу апликацију. Ово ће се применити на све компоненте.
7. цонст Апп = () => (…); // Главна компонента апликације. Овде су дефинисане све руте.
8. ; // Дефинисање руте са тачном путањом од “/” која приказује компоненту ХомеПаге
9. ; // Дефинисање руте са путањом „/абоут“ која приказује компоненту АбоутПаге
10 извоз подразумеване апликације;// Извоз апликације као подразумеване

Коришћење стилова

Стилови се могу користити у Реацт Роутер-у за прилагођавање изгледа и осећаја апликације. Стилови се могу користити за креирање прилагођених компоненти, додавање анимација и још много тога. Стилови се такође могу користити за креирање прилагодљивих изгледа који се прилагођавају различитим величинама екрана. Поред тога, стилови се могу користити за креирање тема за апликацију које омогућавају корисницима да прилагоде своје искуство.

Коришћење јавне фасцикле

Јавна фасцикла у Реацт Роутер-у је посебна фасцикла која се може користити за чување статичких датотека као што су слике, ЦСС и ЈаваСцрипт. Ове датотеке се сервирају директно из јавне фасцикле без обраде од стране Реацт апликације. Ово омогућава краће време учитавања и олакшава управљање средствима на више страница апликације. Јавна фасцикла такође пружа начин да се одређене датотеке држе ван система контроле верзија као што је Гит, што може помоћи у одржавању безбедности и приватности.

Како да увезем ЦСС датотеку из јавне фасцикле у Реацт-у

У Реацт Роутер-у можете да увезете ЦСС датотеку из јавне фасцикле помоћу компоненте Линк. Компонента Линк вам омогућава да одредите путању до датотеке у атрибуту хреф. На пример:

Ово ће увести датотеку стилес.цсс из ваше јавне фасцикле у вашу Реацт Роутер апликацију.