Решено: реагировать на маршрутизатор, используя стили из общей папки.

Основная проблема, связанная с 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
2. импортировать {BrowserRouter as Router, Route} из 'react-router-dom'; // Импорт компонентов BrowserRouter и Route из библиотеки react-router-dom
3. импортировать { createGlobalStyle } из «стилизованных компонентов»; // Импорт функции 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.