Selesai: penghala bertindak balas menggunakan gaya daripada folder awam

Masalah utama yang berkaitan dengan React Router menggunakan gaya daripada folder awam ialah sukar untuk menjejaki gaya dan memastikan ia digunakan dengan betul. Memandangkan folder awam bukan sebahagian daripada pepohon komponen React, sukar untuk mengetahui gaya yang sedang digunakan dan bila. Selain itu, jika berbilang komponen menggunakan gaya yang sama daripada folder awam, sukar untuk menyahpepijat sebarang isu yang timbul.

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. import React daripada 'react'; // Mengimport perpustakaan React
2. import { BrowserRouter sebagai Router, Route } daripada 'react-router-dom'; // Mengimport komponen BrowserRouter dan Route daripada perpustakaan react-router-dom
3. import { createGlobalStyle } daripada 'styled-components'; // Mengimport fungsi createGlobalStyle daripada perpustakaan komponen gaya
4. import Halaman Utama daripada './pages/HomePage'; // Mengimport komponen Halaman Utama
5. import AboutPage daripada './pages/AboutPage'; // Mengimport komponen AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Gaya global untuk keseluruhan apl. Ini akan digunakan untuk semua komponen.
7. const App = () => (…); // Komponen utama apl. Di sinilah semua laluan ditentukan.
8. ; // Menentukan laluan dengan laluan tepat "/" yang menjadikan komponen Halaman Utama
9. ; // Mentakrifkan laluan dengan laluan "/about" yang menjadikan komponen AboutPage
10 eksport Apl lalai;// Mengeksport Apl sebagai lalai

Menggunakan Gaya

Gaya boleh digunakan dalam Penghala Reaksi untuk menyesuaikan rupa dan rasa aplikasi. Gaya boleh digunakan untuk membuat komponen tersuai, menambah animasi dan banyak lagi. Gaya juga boleh digunakan untuk membuat reka letak responsif yang menyesuaikan diri dengan saiz skrin yang berbeza. Selain itu, gaya boleh digunakan untuk mencipta tema untuk aplikasi yang membolehkan pengguna menyesuaikan pengalaman mereka.

Menggunakan Folder Awam

Folder awam dalam React Router ialah folder khas yang boleh digunakan untuk menyimpan fail statik seperti imej, CSS dan JavaScript. Fail ini disampaikan terus dari folder awam tanpa diproses oleh aplikasi React. Ini membolehkan masa pemuatan yang lebih cepat dan memudahkan untuk mengurus aset merentas berbilang halaman aplikasi. Folder awam juga menyediakan cara untuk menyimpan fail tertentu daripada sistem kawalan versi seperti Git, yang boleh membantu mengekalkan keselamatan dan privasi.

Bagaimanakah saya mengimport fail CSS dari folder awam dalam React

Dalam React Router, anda boleh mengimport fail CSS daripada folder awam dengan menggunakan komponen Pautan. Komponen Pautan membolehkan anda menentukan laluan ke fail dalam atribut href. Sebagai contoh:

Ini akan mengimport fail styles.css daripada folder awam anda ke dalam aplikasi React Router anda.