Resolvido: roteador de reação usando estilos da pasta pública

O principal problema relacionado ao React Router usando estilos da pasta pública é que pode ser difícil acompanhar os estilos e garantir que sejam aplicados corretamente. Como a pasta pública não faz parte da árvore de componentes do React, pode ser difícil saber quais estilos estão sendo aplicados e quando. Além disso, se vários componentes estiverem usando o mesmo estilo da pasta pública, pode ser difícil depurar quaisquer problemas que possam surgir.

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. importar React de 'react'; // Importando a biblioteca React
2. import { BrowserRouter as Router, Route } de 'react-router-dom'; // Importando os componentes BrowserRouter e Route da biblioteca react-router-dom
3. import { createGlobalStyle } de 'styled-components'; // Importando a função createGlobalStyle da biblioteca styled-components
4. importar HomePage de './pages/HomePage'; // Importando o componente HomePage
5. importe AboutPage de './pages/AboutPage'; // Importando o componente AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Estilos globais para todo o aplicativo. Isso será aplicado a todos os componentes.
7. app const = () => (…); // O componente principal do aplicativo. É aqui que todas as rotas são definidas.
8. ; // Definindo uma rota com um caminho exato de “/” que renderiza o componente HomePage
9. ; // Definindo uma rota com um caminho de “/about” que renderiza o componente AboutPage
10 Exportar aplicativo padrão;// Exportando o aplicativo como padrão

Usando Estilos

Os estilos podem ser usados ​​no React Router para personalizar a aparência do aplicativo. Os estilos podem ser usados ​​para criar componentes personalizados, adicionar animações e muito mais. Os estilos também podem ser usados ​​para criar layouts responsivos que se adaptam a diferentes tamanhos de tela. Além disso, os estilos podem ser usados ​​para criar temas para o aplicativo que permitem aos usuários personalizar sua experiência.

Usando a pasta pública

A pasta pública no React Router é uma pasta especial que pode ser usada para armazenar arquivos estáticos, como imagens, CSS e JavaScript. Esses arquivos são servidos diretamente da pasta pública sem serem processados ​​pelo aplicativo React. Isso permite tempos de carregamento mais rápidos e facilita o gerenciamento de ativos em várias páginas de um aplicativo. A pasta pública também fornece uma maneira de manter certos arquivos fora de sistemas de controle de versão como o Git, o que pode ajudar a manter a segurança e a privacidade.

Como faço para importar um arquivo CSS da pasta pública no React

No React Router, você pode importar um arquivo CSS da pasta pública usando o componente Link. O componente Link permite especificar um caminho para o arquivo no atributo href. Por exemplo:

Isso importará o arquivo styles.css de sua pasta pública para seu aplicativo React Router.