Yakagadziriswa: react router uchishandisa static masitaera

Dambudziko guru rine chekuita nekushandisa static masitaera neReact Router nderekuti zvinogona kunetsa kucherekedza nzira dzakasiyana uye dzakabatana masitaera. Nezvitaera zvakamira, nzira yega yega inoda kuve neyayo seti yemitemo yeCSS, iyo inogona kukurumidza kuve isingaite uye yakaoma kuchengetedza. Pamusoro pezvo, kana chimiro chikashandiswa munzira dzakawanda, chinoda kudzokororwa kune ese, zvichiita kuti zviome kuchengeta kodhi DRY (Usazvidzokorora).

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. Mutsetse wekutanga unopinza raibhurari yeReact.
2. Mutsara wechipiri unopinza kunze BrowserRouter, Route, uye Link zvikamu kubva react-router-dom raibhurari.
3. Mutsara wechitatu unopinza chikamu chakataera kubva kuraibhurari yakanyorwa-zvikamu.
4. Mutsara wechina unogadzira chikamu cheStyledLink uchishandisa chikamu cheLink chinotengeswa kubva kune react-router-dom uye chinochiisa neruvara: palevioletred uye font-weight: bold, pamwe nehover effect inoshandura ruvara rwayo kuti ruchena uye inobvisa chero chinyorwa. decoration painotenderedzwa pamusoro.
5. Mutsara wechishanu unogadzira chikamu cheApp chinoshandura chikamu cheRouter nezvikamu zviviri zveNzira mukati mayo (imwe yeKumba uye imwe yeAbout). Inopawo runyoro rusina kurongeka rwemalink maviri (Kumba uye Nezve) uchishandisa iyo StyledLink chikamu chakagadzirwa muMutsetse 4 pamusoro pavo vese vakapatsanurwa ne hr tag nekuda kwemaitiro.
6. Mitsetse 8 - 11 inogadzira zvinhu zviviri zvinoshanda zvinonzi Kumba uye Nezve izvo zvinopa h2 ma tags ane mazita azvo mukati pawo paanodanwa nezvikamu zveNzira mumutsara wechishanu pamusoro pawo ose (Kumba kunoshandura kuti “Kumba” ukuwo About achipa “About” )
7. Pakupedzisira, Line 12 inotumira kunze chikamu cheApp kuitira kuti chigone kushandiswa kumwewo mukushandisa kwedu kana zvichidikanwa.

Static Styles

Zvitaera zvimiro muReact Router masitayipi anoiswa kuchikamu uye anoramba akafanana zvisinei neshanduko ipi neipi kumamiriro echikamu kana mapuropu. Izvi zvinopesana nemaitiro ane simba, ayo anoshanduka zvichienderana nemamiriro kana mapuropu echikamu. Zvitaera zvimiro zvinogona kushandiswa kugadzira kutaridzika kunoenderana uye kunzwa mukati mese application, pamwe nekupa nzira iri nyore kune vanogadzira kukurumidza masitayera zvikamu pasina kuzvigadzirisa nemaoko pese paine shanduko.

styled-components package

Styled-zvikamu pasuru yakakurumbira yeReact Router iyo inobvumira vanogadzira kugadzira uye kugadzirisa chikamu-chikamu masitaera mune yavo React application. Inopa nzira iri nyore yekunyora CSS kodhi iyo inokwenenzverwa kune chimwe chikamu, zvichiita kuti zvive nyore kuchengetedza uye kugadzirisa. Styled-zvikamu zvakare inoita kuti zvive nyore kugovera zvitaera muzvikamu zvakawanda, pamwe nekupa rutsigiro rwe theming. Pamusoro pezvo, zvakashongedzwa-zvikamu zvinogona kushandiswa neReact Router's Link chikamu, zvichibvumira vanogadzira kuti vatarise zvinongedzo mukati mekushandisa kwavo.

Maitiro ekushandisa Static Styles

Static masitaera anogona kushandiswa muReact Router nekushandisa iyo inline maitiro hunhu. Uhu hunhu hunokutendera kuti uise chimiro chakananga kune chinhu pasina kudiwa kweakasiyana masitaera. Kuti ushandise static masitaera muReact Router, iwe unozofanirwa kugadzira chinhu chechimiro uye wochipfuudza senharo kune chikamu chechimiro chechimiro. Semuyenzaniso:

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