Вирішено: реагувати на маршрутизатор за допомогою стилів із загальнодоступної папки

Основна проблема, пов’язана з використанням 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 з бібліотеки styled-components
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.