Решено: реагира на рутера, използвайки стилове от публичната папка

Основният проблем, свързан с React Router, използващ стилове от публичната папка, е, че може да бъде трудно да следите стиловете и да се уверите, че са приложени правилно. Тъй като публичната папка не е част от дървото на компонентите на 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. импортиране на React от 'react'; // Импортиране на библиотеката React
2. импортирайте { BrowserRouter като Router, Route } от 'react-router-dom'; // Импортиране на компонентите BrowserRouter и Route от библиотеката react-router-dom
3. импортирайте { createGlobalStyle } от 'styled-components'; // Импортиране на функцията createGlobalStyle от библиотеката със стилизирани компоненти
4. импортиране на начална страница от './pages/HomePage'; // Импортиране на компонента HomePage
5. импортирайте AboutPage от './pages/AboutPage'; // Импортиране на компонента AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Глобални стилове за цялото приложение. Това ще се приложи към всички компоненти.
7. const App = () => (…); // Основният компонент на приложението. Тук се определят всички маршрути.
8. ; // Дефиниране на маршрут с точен път от “/”, който изобразява компонента HomePage
9. ; // Дефиниране на маршрут с път от “/about”, който изобразява компонента AboutPage
10 експортиране на приложение по подразбиране;// Експортиране на приложение по подразбиране

Използване на стилове

Стиловете могат да се използват в React Router, за да персонализирате външния вид и усещането на приложението. Стиловете могат да се използват за създаване на персонализирани компоненти, добавяне на анимации и др. Стиловете могат да се използват и за създаване на адаптивни оформления, които се адаптират към различни размери на екрана. Освен това стиловете могат да се използват за създаване на теми за приложението, които позволяват на потребителите да персонализират своя опит.

Използване на публичната папка

Публичната папка в React Router е специална папка, която може да се използва за съхраняване на статични файлове като изображения, CSS и JavaScript. Тези файлове се сервират директно от публичната папка, без да се обработват от приложението React. Това позволява по-бързо време за зареждане и улеснява управлението на активи в множество страници на приложение. Публичната папка също така предоставя начин за запазване на определени файлове извън системи за контрол на версиите като Git, което може да помогне за поддържане на сигурността и поверителността.

Как да импортирам CSS файл от публична папка в React

В React Router можете да импортирате CSS файл от публичната папка, като използвате компонента Link. Компонентът Link ви позволява да посочите път към файла в атрибута href. Например:

Това ще импортира файла styles.css от вашата публична папка във вашето приложение React Router.