Y brif broblem sy'n gysylltiedig â defnyddio arddulliau statig gyda React Router yw y gall fod yn anodd cadw golwg ar y gwahanol lwybrau a'u harddulliau cysylltiedig. Gydag arddulliau statig, mae angen i bob llwybr gael ei set ei hun o reolau CSS, a all ddod yn anhylaw ac yn anodd eu cynnal yn gyflym. Yn ogystal, os defnyddir arddull mewn sawl llwybr, mae angen ei ddyblygu ar draws pob un ohonynt, gan ei gwneud hi'n anodd cadw'r cod YN SYCH (Peidiwch ag Ailadrodd Eich Hun).
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. Mae'r llinell gyntaf yn mewnforio llyfrgell React.
2. Mae'r ail linell yn mewnforio'r cydrannau BrowserRouter, Route, a Link o'r llyfrgell react-router-dom.
3. Mae'r drydedd llinell yn mewnforio'r gydran styled o lyfrgell cydrannau styled.
4. Mae'r bedwaredd llinell yn creu cydran StyledLink gan ddefnyddio'r gydran Link a fewnforiwyd o react-router-dom ac yn ei steilio gyda lliw: palevioletred a ffont-weight: beiddgar, yn ogystal ag effaith hofran sy'n newid ei liw i wyn ac yn tynnu unrhyw destun addurn pan hofran drosodd.
5. Mae'r bumed llinell yn creu cydran App sy'n gwneud cydran Llwybrydd gyda dwy gydran Llwybr y tu mewn iddi (un ar gyfer Cartref ac un ar gyfer Amdanom). Mae hefyd yn gwneud rhestr heb ei threfnu o ddau ddolen (Home and About) gan ddefnyddio'r gydran StyledLink a grëwyd yn Llinell 4 uwchben y ddau wedi'u gwahanu gan dag awr at ddibenion steilio.
6. Mae Llinellau 8 – 11 yn creu dwy gydran swyddogaethol o'r enw Cartref ac Amdano sy'n gwneud tagiau h2 gyda'u henwau priodol y tu mewn iddynt pan fydd eu cydrannau Llwybr priodol yn Llinell 5 uwch eu pennau yn galw arnynt (Cartref yn rendr “Cartref” tra Ynglŷn yn rendr “Amdanom” ).
7. Yn olaf, mae Llinell 12 yn allforio'r gydran App fel y gellir ei ddefnyddio mewn mannau eraill yn ein cais os oes angen
Arddulliau Statig
Mae arddulliau statig yn React Router yn arddulliau sy'n cael eu cymhwyso i gydran ac sy'n aros yr un peth heb ystyried unrhyw newidiadau i gyflwr neu bropiau'r gydran. Mae hyn yn wahanol i arddulliau deinamig, sy'n newid yn dibynnu ar gyflwr neu bropiau cydran. Gellir defnyddio arddulliau statig i greu golwg a theimlad cyson ar draws cymhwysiad, yn ogystal â darparu ffordd hawdd i ddatblygwyr arddullio cydrannau'n gyflym heb orfod eu haddasu â llaw bob tro y bydd newid.
pecyn cydrannau styled
Mae Styled-components yn becyn poblogaidd ar gyfer React Router sy'n caniatáu i ddatblygwyr greu a rheoli arddulliau lefel cydran yn eu cymwysiadau React. Mae'n darparu ffordd hawdd o ysgrifennu cod CSS sydd wedi'i gwmpasu i un gydran, gan ei gwneud hi'n haws ei gynnal a'i ddadfygio. Mae cydrannau arddull hefyd yn ei gwneud hi'n haws rhannu arddulliau ar draws cydrannau lluosog, yn ogystal â darparu cefnogaeth ar gyfer themâu. Yn ogystal, gellir defnyddio cydrannau ag arddull gydag elfen Link Router React, gan ganiatáu i ddatblygwyr steilio dolenni o fewn eu cymhwysiad.
Sut i Ddefnyddio Arddulliau Statig
Gellir defnyddio arddulliau statig yn React Router trwy ddefnyddio'r priodoledd arddull inline. Mae'r nodwedd hon yn caniatáu ichi gymhwyso arddull yn uniongyrchol i elfen heb fod angen taflen arddull ar wahân. I ddefnyddio arddulliau statig yn React Router, bydd angen i chi greu gwrthrych arddull ac yna ei drosglwyddo fel dadl i brop arddull y gydran. Er enghraifft:
const myStyle = {
lliw cefndir: '#f2f2f2′,
Maint y ffont: '20px',
lliw: '#000'
};
