Direngsekeun: meta router ngagunakeun gaya ti folder umum

Masalah utama anu aya hubunganana sareng React Router nganggo gaya tina folder umum nyaéta yén éta tiasa sesah pikeun ngalacak gaya sareng pastikeun yén éta dilarapkeun leres. Kusabab polder umum sanés bagian tina tangkal komponén React, tiasa sesah terang gaya mana anu diterapkeun sareng iraha. Salaku tambahan, upami sababaraha komponén nganggo gaya anu sami tina folder umum, tiasa sesah pikeun debug masalah anu 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. impor Réaksi tina 'réaksi'; // Ngimpor perpustakaan React
2. impor {BrowserRouter salaku Router, Rute} ti 'réact-router-dom'; // Ngimpor komponén BrowserRouter sareng Rute tina perpustakaan réaksi-router-dom
3. impor {createGlobalStyle} tina 'styled-komponén'; // Importing fungsi createGlobalStyle ti perpustakaan styled-komponén
4. impor HomePage tina './pages/HomePage'; // Importing komponén HomePage
5. impor AboutPage tina './pages/AboutPage'; // Importing komponén AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Gaya global pikeun sakabéh aplikasi. Ieu bakal dilarapkeun ka sadaya komponén.
7. const App = () => (…); // Komponén utama aplikasi. Ieu dimana sadaya rute ditetepkeun.
8. ; // Nangtukeun jalur kalayan jalur pasti tina "/" nu ngajadikeun komponén HomePage
9. ; // Nangtukeun rute sareng jalur "/ ngeunaan" anu ngajantenkeun komponén AboutPage
10 ékspor aplikasi standar; // Ékspor App salaku standar

Ngagunakeun Styles

Gaya tiasa dianggo dina React Router pikeun ngaluyukeun tampilan sareng raos aplikasi. Gaya tiasa dianggo pikeun nyiptakeun komponén khusus, nambihan animasi, sareng seueur deui. Gaya ogé tiasa dianggo pikeun nyiptakeun perenah responsif anu adaptasi kana ukuran layar anu béda. Salaku tambahan, gaya tiasa dianggo pikeun nyiptakeun téma pikeun aplikasi anu ngamungkinkeun para pangguna ngarobih pangalamanana.

Ngagunakeun Polder Umum

Polder umum dina React Router mangrupikeun folder khusus anu tiasa dianggo pikeun nyimpen file statik sapertos gambar, CSS, sareng JavaScript. Berkas ieu dilayanan langsung tina polder umum tanpa diolah ku aplikasi React. Hal ieu ngamungkinkeun waktos ngamuat langkung gancang sareng ngagampangkeun pikeun ngatur aset dina sababaraha halaman aplikasi. Folder umum ogé nyayogikeun cara pikeun ngajaga file tinangtu tina sistem kontrol versi sapertos Git, anu tiasa ngabantosan ngajaga kaamanan sareng privasi.

Kumaha kuring ngimpor file CSS tina folder umum di React

Dina React Router, anjeun tiasa ngimpor file CSS tina folder umum nganggo komponén Link. Komponén Link ngidinan Anjeun pikeun nangtukeun jalur ka file dina atribut href. Salaku conto:

Ieu bakal ngimpor file styles.css tina folder umum anjeun kana aplikasi React Router anjeun.