Kuxazululiwe: phendula umzila usebenzisa izitayela ezimile

Inkinga enkulu ehlobene nokusebenzisa izitayela ezimile nge-React Router ukuthi kungase kube nzima ukulandelela imizila ehlukene kanye nezitayela ezihambisana nazo. Ngezitayela ezimile, umzila ngamunye udinga ukuba nesethi yawo yemithetho ye-CSS, engase ingalawuleki ngokushesha futhi kube nzima ukuyinakekela. Ukwengeza, uma isitayela sisetshenziswa emizileni eminingi, sidinga ukuphindaphindwa kuyo yonke, okwenza kube nzima ukugcina ikhodi YOMILE (Ungaziphindaphindi).

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. Umugqa wokuqala ungenisa ngaphandle umtapo wezincwadi we-React.
2. Umugqa wesibili ungenisa ngaphandle izingxenye ze-BrowserRouter, Route, kanye ne-Link kusuka kumtapo wezincwadi we-react-router-dom.
3. Umugqa wesithathu ungenisa ingxenye yesitayela kumtapo wezincwadi owenziwe ngesitayela.
4. Umugqa wesine udala ingxenye ye-StyledLink usebenzisa ingxenye Yesixhumanisi engeniswe isuka ku-react-router-dom futhi uyilungise ngombala: i-palevioletred kanye nesisindo sefonti: okugqamile, kanye nomphumela wokuzungeza oshintsha umbala wayo ube mhlophe futhi ukhiphe noma yimuphi umbhalo. umhlobiso lapho uhambisa phezulu.
5. Umugqa wesihlanu udala ingxenye Yohlelo Lokusebenza enikeza ingxenye Yerutha enezingxenye ezimbili Zomzila ngaphakathi kwayo (eyodwa ethi Ikhaya neyodwa ethi Mayelana). Iphinde inikeze uhlu olungahlelekile lwezixhumanisi ezimbili (Ekhaya nokuthi Mayelana) kusetshenziswa ingxenye ye-StyledLink edalwe kumugqa wesi-4 ngaphezu kwakho kokubili okuhlukaniswe umaka we-hr ngezinjongo zesitayela.
6. Ulayini wesi-8 – 11 udala izingxenye ezimbili ezisebenzayo ezibizwa ngokuthi Ikhaya futhi Mayelana nalokho kunikeza omaka abangu-h2 ngamagama ahlukene phakathi kwabo lapho bebizwa izingxenye zabo zoMzila kumugqa wesi-5 ngaphezu kwayo yomibili (Ekhaya ihumusha ngokuthi “Ekhaya” kuyilapho okuthi Mayelana ihumusha ngokuthi “Mayelana” ).
7. Okokugcina, umugqa we-12 uthumela ingxenye yohlelo lokusebenza ukuze isetshenziswe kwenye indawo ohlelweni lwethu lokusebenza uma kudingeka.

Izitayela Ezimile

Izitayela ezimile ku-React Router ziyizitayela ezisetshenziswa engxenyeni futhi zihlala zinjalo kungakhathaliseki ukuthi yiziphi izinguquko esimweni sengxenye noma izisetshenziswa. Lokhu kuphambene nezitayela eziguqukayo, ezishintshayo kuye ngesimo noma ama-props wengxenye. Izitayela ezimile zingasetshenziswa ukudala ukubukeka nokuzwakala okungaguquki kuhlelo lokusebenza lonkana, kanye nokunikeza indlela elula yokuthi onjiniyela benze ngokushesha izingxenye zesitayela ngaphandle kokuzilungisa mathupha njalo uma kunoshintsho.

iphakheji ye-styled-components

Izingxenye zesitayela yiphakheji edumile ye-React Router evumela abathuthukisi ukuthi bakhe futhi baphathe izitayela zeleveli yengxenye ezinhlelweni zabo ze-React. Inikeza indlela elula yokubhala ikhodi ye-CSS esekwe engxenyeni eyodwa, okwenza kube lula ukuyigcina nokuyilungisa. Izingxenye ezinesitayela futhi zikwenza kube lula ukwabelana ngezitayela kuzo zonke izingxenye eziningi, kanye nokuhlinzeka ngosekelo lwezihloko. Ukwengeza, izingxenye ezinesitayela zingasetshenziswa nengxenye ye-React Router's Link, okuvumela onjiniyela ukuba benze izixhumanisi zesitayela ngaphakathi kohlelo lwabo lokusebenza.

Ungazisebenzisa kanjani Izitayela Ezimile

Izitayela ezimile zingasetshenziswa ku-React Router ngokusebenzisa isibaluli sesitayela esisemgqeni. Lesi sibaluli sikuvumela ukuthi usebenzise isitayela ngokuqondile entweni ngaphandle kwesidingo seshidi lesitayela elihlukile. Ukuze usebenzise izitayela ezimile ku-React Router, uzodinga ukudala into yesitayela bese uyidlulisa njengengxabano ku-prop yengxenye yesitayela. Ngokwesibonelo:

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