Rezoud: reyaji routeur lè l sèvi avèk estil nan katab piblik la

Pwoblèm prensipal ki gen rapò ak React Routeur lè l sèvi avèk estil ki soti nan katab piblik la se ke li ka difisil kenbe tras nan estil yo epi asire w ke yo aplike kòrèkteman. Depi katab piblik la pa fè pati pyebwa eleman React, li ka difisil pou konnen ki estil yo ap aplike ak ki lè. Anplis de sa, si plizyè konpozan ap itilize menm style nan katab piblik la, li ka difisil pou debogaj nenpòt pwoblèm ki rive.

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. enpòte React soti nan 'react'; // Enpòte bibliyotèk React la
2. enpòte { BrowserRouter kòm Routeur, Route } soti nan 'react-router-dom'; // Enpòte eleman BrowserRouter ak Route nan bibliyotèk react-router-dom
3. enpòte { createGlobalStyle } soti nan 'styled-components'; // Enpòte fonksyon createGlobalStyle nan bibliyotèk styled-components
4. enpòte HomePage soti nan './pages/HomePage'; // Enpòte eleman paj dakèy la
5. enpòte AboutPage soti nan './pages/AboutPage'; // Enpòte eleman AboutPage la
6. const GlobalStyle = createGlobalStyle`…`; // Styles mondyal pou tout aplikasyon an. Sa a pral aplike nan tout eleman.
7. const App = () => (…); // Eleman prensipal aplikasyon an. Sa a se kote tout wout yo defini.
8. ; // Defini yon wout ak yon chemen egzak nan "/" ki rann eleman nan HomePage
9. ; // Defini yon wout ak yon chemen "/about" ki rann eleman AboutPage la
10 ekspòtasyon aplikasyon default;// Ekspòtasyon aplikasyon kòm default

Sèvi ak Styles

Styles yo ka itilize nan React Router pou personnaliser gade ak santi aplikasyon an. Styles yo ka itilize pou kreye eleman koutim, ajoute animasyon, ak plis ankò. Styles yo ka itilize tou pou kreye kouman reponn ki adapte ak diferan gwosè ekran. Anplis de sa, estil yo ka itilize yo kreye tèm pou aplikasyon an ki pèmèt itilizatè yo Customize eksperyans yo.

Sèvi ak Dosye Piblik la

Katab piblik la nan React Router se yon katab espesyal ki ka itilize pou estoke fichye estatik tankou imaj, CSS, ak JavaScript. Yo sèvi dosye sa yo dirèkteman nan katab piblik la san aplikasyon React la trete. Sa pèmèt tan chajman pi vit epi li fè li pi fasil pou jere byen atravè plizyè paj nan yon aplikasyon. Katab piblik la tou bay yon fason pou kenbe sèten dosye soti nan sistèm kontwòl vèsyon tankou Git, ki ka ede kenbe sekirite ak vi prive.

Kouman pou mwen enpòte yon dosye CSS nan katab piblik nan React

Nan React Router, ou ka enpòte yon dosye CSS soti nan katab piblik la lè w itilize eleman Link la. Eleman Link la pèmèt ou presize yon chemen nan dosye a nan atribi href la. Pa egzanp:

Sa a pral enpòte fichye styles.css ki soti nan katab piblik ou a nan aplikasyon React Router ou a.