Diselesaikan: router reaksi menggunakan gaya dari folder publik

Masalah utama terkait dengan React Router yang menggunakan gaya dari folder publik adalah sulitnya melacak gaya dan memastikannya diterapkan dengan benar. Karena folder publik bukan bagian dari pohon komponen React, akan sulit untuk mengetahui gaya mana yang diterapkan dan kapan. Selain itu, jika beberapa komponen menggunakan gaya yang sama dari folder publik, akan sulit untuk men-debug masalah apa pun yang muncul.

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. impor Bereaksi dari 'bereaksi'; // Mengimpor pustaka React
2. impor { BrowserRouter sebagai Router, Rute } dari 'react-router-dom'; // Mengimpor komponen BrowserRouter dan Rute dari pustaka react-router-dom
3. import { createGlobalStyle } from 'styled-components'; // Mengimpor fungsi createGlobalStyle dari pustaka komponen-gaya
4. impor Beranda dari './pages/HomePage'; // Mengimpor komponen HomePage
5. impor AboutPage dari './pages/AboutPage'; // Mengimpor komponen AboutPage
6. const GlobalStyle = buatGlobalStyle`…`; // Gaya global untuk seluruh aplikasi. Ini akan diterapkan ke semua komponen.
7. aplikasi const = () => (…); // Komponen utama aplikasi. Di sinilah semua rute ditentukan.
8. ; // Menentukan rute dengan jalur persis "/" yang merender komponen HomePage
9. ; // Menentukan rute dengan jalur "/about" yang merender komponen AboutPage
10 ekspor Aplikasi default;// Mengekspor Aplikasi sebagai default

Menggunakan Gaya

Gaya dapat digunakan di React Router untuk menyesuaikan tampilan dan nuansa aplikasi. Gaya dapat digunakan untuk membuat komponen khusus, menambahkan animasi, dan lainnya. Gaya juga dapat digunakan untuk membuat tata letak responsif yang menyesuaikan dengan ukuran layar yang berbeda. Selain itu, gaya dapat digunakan untuk membuat tema aplikasi yang memungkinkan pengguna menyesuaikan pengalaman mereka.

Menggunakan Folder Publik

Folder publik di React Router adalah folder khusus yang dapat digunakan untuk menyimpan file statis seperti gambar, CSS, dan JavaScript. File-file ini disajikan langsung dari folder publik tanpa diproses oleh aplikasi React. Hal ini memungkinkan waktu pemuatan yang lebih cepat dan mempermudah pengelolaan aset di beberapa halaman aplikasi. Folder publik juga menyediakan cara untuk menyimpan file tertentu dari sistem kontrol versi seperti Git, yang dapat membantu menjaga keamanan dan privasi.

Bagaimana cara mengimpor file CSS dari folder publik di React

Di React Router, Anda dapat mengimpor file CSS dari folder publik dengan menggunakan komponen Link. Komponen Tautan memungkinkan Anda menentukan jalur ke file dalam atribut href. Sebagai contoh:

Ini akan mengimpor file styles.css dari folder publik Anda ke dalam aplikasi React Router Anda.