Rozwiązany: router reaguje przy użyciu stylów z folderu publicznego

Głównym problemem związanym z React Router przy użyciu stylów z folderu publicznego jest to, że śledzenie stylów i upewnienie się, że są one stosowane poprawnie, może być trudne. Ponieważ folder publiczny nie jest częścią drzewa komponentów React, ustalenie, które style i kiedy są stosowane, może być trudne. Ponadto, jeśli wiele składników używa tego samego stylu z folderu publicznego, debugowanie wszelkich pojawiających się problemów może być trudne.

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. importuj Reaguj z „reaguj”; // Importowanie biblioteki React
2. zaimportuj { BrowserRouter as Router, Route } z „react-router-dom”; // Importowanie komponentów BrowserRouter i Route z biblioteki react-router-dom
3. zaimportuj { createGlobalStyle } z „styled-components”; // Importowanie funkcji createGlobalStyle z biblioteki styled-components
4. zaimportuj stronę główną z „./pages/HomePage”; // Importowanie komponentu HomePage
5. zaimportuj AboutPage z „./pages/AboutPage”; // Importowanie komponentu AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Globalne style dla całej aplikacji. Zostanie to zastosowane do wszystkich komponentów.
7. const Aplikacja = () => (…); // Główny składnik aplikacji. Tutaj definiowane są wszystkie trasy.
8. ; // Definiowanie trasy z dokładną ścieżką „/”, która renderuje komponent HomePage
9. ; // Definiowanie trasy ze ścieżką „/about”, która renderuje komponent AboutPage
10 wyeksportuj domyślną aplikację;// Eksportowanie aplikacji jako domyślnej

Używanie stylów

Style mogą być używane w React Router do dostosowywania wyglądu i działania aplikacji. Style mogą być używane do tworzenia niestandardowych komponentów, dodawania animacji i nie tylko. Style mogą być również używane do tworzenia responsywnych układów, które dostosowują się do różnych rozmiarów ekranu. Ponadto style mogą służyć do tworzenia motywów dla aplikacji, które pozwalają użytkownikom dostosować ich działanie.

Korzystanie z folderu publicznego

Folder publiczny w React Router to specjalny folder, którego można używać do przechowywania plików statycznych, takich jak obrazy, CSS i JavaScript. Pliki te są podawane bezpośrednio z folderu publicznego bez przetwarzania przez aplikację React. Pozwala to na szybsze ładowanie i ułatwia zarządzanie zasobami na wielu stronach aplikacji. Folder publiczny zapewnia również sposób na trzymanie niektórych plików z dala od systemów kontroli wersji, takich jak Git, co może pomóc w utrzymaniu bezpieczeństwa i prywatności.

Jak zaimportować plik CSS z folderu publicznego w React

W React Router możesz zaimportować plik CSS z folderu publicznego za pomocą komponentu Link. Komponent Link umożliwia określenie ścieżki do pliku w atrybucie href. Na przykład:

Spowoduje to zaimportowanie pliku styles.css z folderu publicznego do aplikacji React Router.