Datryswyd: adweithio llwybrydd gan ddefnyddio arddulliau o'r ffolder cyhoeddus

Y brif broblem sy'n gysylltiedig â React Router yn defnyddio arddulliau o'r ffolder cyhoeddus yw y gall fod yn anodd cadw golwg ar yr arddulliau a sicrhau eu bod yn cael eu cymhwyso'n gywir. Gan nad yw'r ffolder cyhoeddus yn rhan o goeden cydrannau React, gall fod yn anodd gwybod pa arddulliau sy'n cael eu defnyddio a phryd. Yn ogystal, os yw cydrannau lluosog yn defnyddio'r un arddull o'r ffolder cyhoeddus, gall fod yn anodd dadfygio unrhyw faterion sy'n codi.

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. mewnforio Adwaith o 'react'; // Mewnforio llyfrgell React
2. mewnforio { BrowserRouter fel Llwybrydd, Llwybr } o 'react-router-dom'; // Mewnforio cydrannau BrowserRouter a Route o'r llyfrgell react-router-dom
3. mewnforio { createGlobalStyle } o 'styled-components'; // Mewnforio swyddogaeth createGlobalStyle o'r llyfrgell cydrannau styled
4. mewnforio Hafan Tudalen o './pages/HomePage'; // Mewnforio'r gydran Hafan
5. mewnforio AboutPage o './pages/AboutPage'; // Mewnforio'r gydran AboutPage
6. const GlobalStyle = createGlobalStyle`…`; // Arddulliau byd-eang ar gyfer yr ap cyfan. Bydd hyn yn cael ei gymhwyso i bob cydran.
7. const App = () => (…); // Prif gydran yr app. Dyma lle mae pob llwybr wedi'i ddiffinio.
8. ; // Diffinio llwybr ag union lwybr o “/” sy'n gwneud yr elfen Tudalen Cartref
9. ; // Diffinio llwybr gyda llwybr o “/about” sy'n gwneud yr elfen AboutPage
10 allforio ap rhagosodedig;// Allforio Ap fel rhagosodiad

Defnyddio Arddulliau

Gellir defnyddio arddulliau yn React Router i addasu edrychiad a theimlad y cymhwysiad. Gellir defnyddio arddulliau i greu cydrannau wedi'u teilwra, ychwanegu animeiddiadau, a mwy. Gellir defnyddio arddulliau hefyd i greu cynlluniau ymatebol sy'n addasu i wahanol feintiau sgrin. Yn ogystal, gellir defnyddio arddulliau i greu themâu ar gyfer y rhaglen sy'n caniatáu i ddefnyddwyr addasu eu profiad.

Defnyddio'r Ffolder Gyhoeddus

Mae'r ffolder cyhoeddus yn React Router yn ffolder arbennig y gellir ei ddefnyddio i storio ffeiliau statig fel delweddau, CSS, a JavaScript. Mae'r ffeiliau hyn yn cael eu gwasanaethu'n uniongyrchol o'r ffolder cyhoeddus heb gael eu prosesu gan raglen React. Mae hyn yn caniatáu amseroedd llwytho cyflymach ac yn ei gwneud hi'n haws rheoli asedau ar draws sawl tudalen o raglen. Mae'r ffolder cyhoeddus hefyd yn darparu ffordd i gadw rhai ffeiliau allan o systemau rheoli fersiwn fel Git, a all helpu i gynnal diogelwch a phreifatrwydd.

Sut mae mewnforio ffeil CSS o ffolder cyhoeddus yn React

Yn React Router, gallwch fewnforio ffeil CSS o'r ffolder cyhoeddus trwy ddefnyddio'r gydran Cyswllt. Mae'r gydran Cyswllt yn eich galluogi i nodi llwybr i'r ffeil yn y briodwedd href. Er enghraifft:

Bydd hyn yn mewnforio'r ffeil styles.css o'ch ffolder cyhoeddus i'ch rhaglen React Router.