An warware: amsa na'ura mai ba da hanya tsakanin hanyoyin sadarwa ta amfani da sifofi na tsaye

Babban matsalar da ke da alaƙa da amfani da tsayayyen salo tare da React Router shine cewa yana iya zama da wahala a kiyaye hanyoyin hanyoyi daban-daban da salon haɗin su. Tare da sifofi na tsaye, kowace hanya tana buƙatar samun tsarinta na dokokin CSS, waɗanda zasu iya zama marasa ƙarfi da wahala da sauri. Bugu da ƙari, idan an yi amfani da salo a hanyoyi da yawa, yana buƙatar a kwafi shi a cikin duka, yana da wahala a kiyaye lambar DRY (Kada ku Maimaita Kanku).

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. Layin farko yana shigo da ɗakin karatu na React.
2. Layi na biyu yana shigo da kayan aikin BrowserRouter, Route, da Link daga ɗakin karatu na react-router-dom.
3. Layi na uku yana shigo da kayan da aka tsara daga ɗakin karatu mai salo.
4. Layi na huɗu yana ƙirƙirar ɓangaren StyledLink ta amfani da ɓangaren Link da aka shigo da shi daga react-router-dom kuma ya sanya shi da launi: palevioletred da font-weight: m, da kuma tasirin hover wanda ke canza launinsa zuwa fari kuma yana cire kowane rubutu. ado idan an shata.
5. Layi na biyar ya samar da wani nau'in App wanda ke mayar da bangaren na'ura mai ba da hanya tsakanin hanyoyin sadarwa (Router components) da ke cikinsa (daya na Gida da na About). Hakanan yana ba da jerin hanyoyin haɗin yanar gizo guda biyu marasa tsari (Gida da Game da) ta amfani da ɓangaren StyledLink da aka ƙirƙira a Layi 4 da ke sama su duka biyun sun rabu da alamar hr don dalilai na salo.
6. Layi na 8 - 11 sun ƙirƙiri wasu sassa guda biyu masu aiki da ake kira Gida da Game da wannan suna sanya h2 tags tare da sunayensu daban-daban a cikin su lokacin da aka kira su ta hanyar hanyoyin hanyoyin su a cikin layi na 5 a sama da su duka biyu (Gida yana fassara "Gida" yayin da Game da ke fassara "Game da" ).
7. A ƙarshe, Line 12 yana fitar da bangaren App don haka ana iya amfani da shi a wani wuri a cikin aikace-aikacen mu idan an buƙata

A tsaye Salon

Salon madaidaici a cikin React Router salo ne da aka yi amfani da su akan wani sashi kuma suna zama iri ɗaya ba tare da la'akari da kowane canje-canje ga yanayin ɓangaren ko kayan aikin ba. Wannan ya bambanta da salo mai tsauri, waɗanda ke canzawa dangane da yanayi ko kayan aikin wani sashi. Za a iya amfani da salo na tsaye don ƙirƙirar daidaiton kamanni da jin daɗin aikace-aikacen, da kuma samar da hanya mai sauƙi ga masu haɓakawa don saurin salon abubuwan da aka gyara ba tare da daidaita su da hannu a duk lokacin da aka samu canji ba.

kunshin sassa masu salo

Abubuwan Salon Salon sanannen fakitin React Router ne wanda ke ba masu haɓakawa damar ƙirƙira da sarrafa salon matakin-bangare a cikin aikace-aikacensu na React. Yana ba da hanya mai sauƙi don rubuta lambar CSS wacce aka keɓance zuwa sassa guda ɗaya, yana sauƙaƙa don kiyayewa da cirewa. Salo-bangaren kuma yana sauƙaƙa raba salo a cikin sassa da yawa, da kuma bayar da goyan baya don jigo. Bugu da ƙari, ana iya amfani da abubuwan da aka tsara tare da React Router's Link bangaren, kyale masu haɓakawa su tsara hanyoyin haɗin yanar gizo a cikin aikace-aikacen su.

Yadda ake amfani da Static Styles

Za a iya amfani da salo na tsaye a cikin React Router ta amfani da sifa na salon layi. Wannan sifa tana ba ku damar amfani da salo kai tsaye zuwa wani abu ba tare da buƙatar takardar salo daban ba. Don amfani da tsayayyen salo a cikin React Router, kuna buƙatar ƙirƙirar abu mai salo sannan ku wuce shi azaman hujja ga salon kayan aikin. Misali:

const myStyle = {
bangon launi: '#f2f2f2',
Girman font: '20px',
launi: '#000'
};