Isonjululwe: i-router phendula usebenzisa izitayile ezimileyo

Eyona ngxaki iphambili enxulumene nokusebenzisa izimbo ezimileyo ngeReact Router kukuba kunokuba nzima ukugcina umkhondo weendlela ezahlukeneyo kunye nezimbo ezihambelana nazo. Ngezimbo ezimileyo, indlela nganye ifuna ukuba neseti yayo yemithetho ye-CSS, enokuthi ikhawuleze ibenzima kwaye kube nzima ukuyigcina. Ukongeza, ukuba isitayile sisetyenziswa kwiindlela ezininzi, kufuneka siphindaphindwe kuzo zonke, isenza kube nzima ukugcina ikhowudi DRY (Musa ukuziphinda).

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. Umgca wokuqala ungenisa ngaphandle ilayibrari yeReact.
2. Umgca wesibini ungenisa ngaphandle i-BrowserRouter, Route, and Link components ukusuka kwilayibrari ye-react-router-dom.
3. Umgca wesithathu ungenisa inxalenye enesitayile kwithala leencwadi elinesitayile.
4. Umgca wesine wenza icandelo le-StyledLink usebenzisa i-Link yecandelo elingeniswe kwi-react-router-dom kunye nezitayile ngombala: i-palevioletred kunye ne-font-weight: bold, kunye ne-hover effect etshintsha umbala wayo ube mhlophe kwaye isuse nayiphi na isicatshulwa. umhombiso xa uzuliswa phezulu.
5. Umgca wesihlanu udala i-App component eyenza i-Router component kunye namacandelo amabini eNdlela ngaphakathi kuyo (enye yeKhaya kunye ne-About). Ikwanikezela ngoluhlu olungacwangciswanga lwamakhonkco amabini (Ikhaya kunye noMalunga) kusetyenziswa icandelo le-StyledLink elenziwe kuMgca wesi-4 ngaphezu kwawo omabini ahlulwe ngethegi ye-hr ngeenjongo zesimbo.
6. Umgca wesi-8 ukuya kwele-11 udala amacandelo amabini asebenzayo abizwa ngokuba yiKhaya naMalunga anika iithegi ze-h2 ngamagama azo ngaphakathi kuzo xa ebizwa ngamacandelo eNdlela yawo kumgca wesi-5 ngaphezulu kwawo omabini (eKhaya liguqulela “Ekhaya” ngelixa u-About uguqulela “Malunga” ).
7. Okokugqibela, Umgca we-12 uthumela icandelo le-App ukuze lisetyenziswe kwenye indawo kwisicelo sethu ukuba siyafuneka.

Izimbo ezimileyo

Izitayile ezimileyo kwiReact Router zizitayile ezisetyenziswa kwicandelo kwaye zihlala zinjalo kungakhathaliseki naluphi na utshintsho kwimeko yecandelo okanye kwiipropu. Oku kuchasene nezimbo eziguquguqukayo, ezitshintsha ngokuxhomekeke kwimeko okanye kwiiprops zecandelo. Izitayile ezingatshintshiyo zingasetyenziswa ukwenza inkangeleko engaguqukiyo kunye nokuziva kwisicelo sonke, kunye nokubonelela ngendlela elula kubaphuhlisi ukwenza iinxalenye zesimbo ngokukhawuleza ngaphandle kokuzihlengahlengisa ngesandla ngalo lonke ixesha kukho utshintsho.

iphakheji ye-styled-components

I-Styd-components yiphakheji edumileyo yeReact Router evumela abaphuhlisi ukuba benze kwaye balawule izimbo zomgangatho wecandelo kwizicelo zabo zeReact. Inika indlela elula yokubhala ikhowudi ye-CSS efikelelwe kwicandelo elinye, ikwenza kube lula ukuyigcina kunye nokulungiswa kweempazamo. Amalungu anesitayile akwenza kube lula ukwabelana ngezitayile kumacandelo amaninzi, kunye nokubonelela ngenkxaso kumxholo. Ukongeza, izinto ezinesitayile zinokusetyenziswa kunye necandelo leReact Router's Link, evumela abaphuhlisi ukuba benze amakhonkco esitayile ngaphakathi kwesicelo sabo.

Uzisebenzisa njani izimbo ezimileyo

Izitayile ezimileyo zingasetyenziswa kwiReact Router ngokusebenzisa uphawu lwesitayile esingaphakathi. Olu phawu lukuvumela ukuba usebenzise isimbo ngokuthe ngqo kwinto ngaphandle kwesidingo secwecwe lesimbo elahlukileyo. Ukusebenzisa izitayile ezimileyo kwiReact Router, kuya kufuneka uyile into yesimbo kwaye emva koko uyidlulise njengengxoxo kwipropu yesimbo secandelo. Umzekelo:

const myStyle = {
umbala ongasemva: '#f2f2f2′,
fontSize: '20px',
umbala: '#000'
};