Rezoud: reyaji routeur lè l sèvi avèk estil estatik

Pwoblèm prensipal ki gen rapò ak lè l sèvi avèk estil estatik ak React Router se ke li ka difisil kenbe tras nan wout yo diferan ak estil ki asosye yo. Avèk estil estatik, chak wout bezwen gen pwòp seri règ CSS li yo, ki ka byen vit vin difisil ak difisil pou kenbe. Anplis de sa, si yo itilize yon style nan plizyè wout, li bezwen yo dwe kopi sou tout nan yo, sa ki fè li difisil kenbe kòd la SEK (pa repete tèt ou).

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import styled from 'styled-components';
 
const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;

  &:hover {
    color: white;
    text-decoration: none;  
  }  
`;

 const App = () => (   <Router>     <div>       <ul>         <li><StyledLink to="/">Home</StyledLink></li>         <li><StyledLink to="/about">About</StyledLink></li>       </ul>       <hr />       <Route exact path="/" component={Home} />       <Route path="/about" component={About} />     </div>   </Router>) ;

 const Home = () => (   <div>     <h2>Home</h2>   </div>) ;

 const About = () => (   <div>     <h2>About</h2>   </div>) ;

 export default App;

1. Premye liy enpòte bibliyotèk React la.
2. Dezyèm liy lan enpòte eleman BrowserRouter, Route, ak Link nan bibliyotèk react-router-dom.
3. Twazyèm liy enpòte eleman styled nan bibliyotèk styled-components.
4. Katriyèm liy lan kreye yon eleman StyledLink lè l sèvi avèk eleman Link enpòte soti nan react-router-dom ak style li ak koulè: palevioletred ak font-weight: fonse, osi byen ke yon efè hover ki chanje koulè li an blan epi retire nenpòt tèks. dekorasyon lè plane sou.
5. Senkyèm liy lan kreye yon eleman App ki rann yon eleman Routeur ak de eleman Route andedan li (youn pou Kay ak youn pou About). Li rann tou yon lis de lyen san lòd (Kay ak About) lè l sèvi avèk eleman StyledLink ki te kreye nan Liy 4 anlè yo tou de separe pa yon tag hr pou rezon manier.
6. Liy 8 – 11 kreye de eleman fonksyonèl yo rele Kay ak About ki rann tags h2 ak non respektif yo andedan yo lè yo rele yo pa eleman respektif Route yo nan Liy 5 anlè yo tou de (Lakay rann "Lakay" pandan y ap rann "About" ).
7. Finalman, Liy 12 ekspòte eleman App a pou li ka itilize yon lòt kote nan aplikasyon nou an si sa nesesè.

Estil estatik

Estil estatik nan React Router se estil ki aplike nan yon eleman epi ki rete menm jan kèlkeswa chanjman nan eta a oswa akseswar eleman an. Sa a se nan Kontrèman ak estil dinamik, ki chanje depann sou eta a oswa akseswar nan yon eleman. Styles estatik yo ka itilize pou kreye yon aparans ki konsistan atravè yon aplikasyon, epi tou bay yon fason fasil pou devlopè yo byen vit style eleman san yo pa bezwen manyèlman ajiste yo chak fwa gen yon chanjman.

estile-konpozan pake

Styled-components se yon pake popilè pou React Router ki pèmèt devlopè yo kreye ak jere estil nivo eleman nan aplikasyon React yo. Li bay yon fason fasil pou ekri kòd CSS ki kad nan yon sèl eleman, sa ki fè li pi fasil pou kenbe ak debogaj. Styled-components tou fè li pi fasil yo pataje estil atravè plizyè konpozan, osi byen ke bay sipò pou tèm. Anplis de sa, konpozan style yo ka itilize ak eleman Link React Router a, ki pèmèt devlopè yo style lyen nan aplikasyon yo.

Ki jan yo itilize estil estatik

Styles estatik yo ka itilize nan React Router lè w itilize atribi style inline. Atribi sa a pèmèt ou aplike yon style dirèkteman nan yon eleman san yo pa bezwen yon fèy style separe. Pou itilize estil estatik nan React Router, w ap bezwen kreye yon objè style epi pase li kòm yon agiman nan prop style eleman an. Pa egzanp:

const myStyle = {
backgroundColor: '#f2f2f2',
fontSize: '20px',
koulè: '#000'
};