נפתרה: הגיבו לנתב באמצעות סגנונות סטטיים

הבעיה העיקרית הקשורה לשימוש בסגנונות סטטיים עם React Router היא שיכול להיות קשה לעקוב אחר המסלולים השונים והסגנונות הקשורים אליהם. עם סגנונות סטטיים, לכל מסלול צריך להיות סט חוקי CSS משלו, שעלולים להפוך במהירות למסורבלים וקשים לתחזוקה. בנוסף, אם סגנון משמש במספר מסלולים, יש לשכפל אותו על פני כולם, מה שמקשה על שמירת הקוד DRY (אל תחזור על עצמך).

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. השורה הראשונה מייבאת את ספריית React.
2. השורה השנייה מייבאת את רכיבי BrowserRouter, Route ו-Link מספריית react-router-dom.
3. השורה השלישית מייבאת את הרכיב המעוצב מספריית הרכיבים בסגנון.
4. השורה הרביעית יוצרת רכיב StyledLink באמצעות רכיב ה-Link המיובא מ-react-router-dom ומעצבת אותו בצבע: סגול חיוור ו-font-weight: bold, וכן אפקט רחף שמשנה את צבעו ללבן ומסיר כל טקסט קישוט כאשר מרחפים מעל.
5. השורה החמישית יוצרת רכיב App שמציג רכיב נתב עם שני רכיבי Route בתוכו (אחד עבור Home ואחד עבור About). הוא גם מציג רשימה לא מסודרת של שני קישורים (בית ואודות) באמצעות רכיב StyledLink שנוצר בשורה 4 מעל שניהם מופרדים על ידי תג hr למטרות סטיילינג.
6. שורות 8 - 11 יוצרות שני רכיבים פונקציונליים הנקראים Home ו- About שמציגים תגיות h2 עם שמותיהם בהתאמה כאשר רכיבי המסלול שלהם בשורה 5 נראים מעל שניהם (Home render "Home" בעוד ש-About rendering "About" ).
7. לבסוף, שורה 12 מייצאת את רכיב האפליקציה כך שניתן יהיה להשתמש בו במקום אחר באפליקציה שלנו במידת הצורך

סגנונות סטטיים

סגנונות סטטיים ב-React Router הם סגנונות המוחלים על רכיב ונשארים זהים ללא קשר לשינויים כלשהם במצב או באביזרים של הרכיב. זאת בניגוד לסגנונות דינמיים, המשתנים בהתאם למצב או לאביזרים של רכיב. ניתן להשתמש בסגנונות סטטיים כדי ליצור מראה ותחושה עקביים בכל אפליקציה, כמו גם לספק דרך קלה למפתחים לסגנן רכיבים במהירות מבלי להתאים אותם ידנית בכל פעם שיש שינוי.

חבילת רכיבים מעוצבים

Styled-components היא חבילה פופולרית עבור React Router המאפשרת למפתחים ליצור ולנהל סגנונות ברמת הרכיב ביישומי React שלהם. הוא מספק דרך קלה לכתיבת קוד CSS עם היקף לרכיב בודד, מה שמקל על תחזוקה וניפוי באגים. רכיבי סגנון גם מקלים על שיתוף סגנונות על פני רכיבים מרובים, וכן מספקים תמיכה לנושאים. בנוסף, ניתן להשתמש ברכיבים מעוצבים עם רכיב ה-Link של React Router, מה שמאפשר למפתחים לעצב קישורים בתוך האפליקציה שלהם.

כיצד להשתמש בסגנונות סטטיים

ניתן להשתמש בסגנונות סטטיים ב-React Router באמצעות תכונת הסגנון המוטבע. תכונה זו מאפשרת לך להחיל סגנון ישירות על אלמנט ללא צורך בגיליון סגנונות נפרד. כדי להשתמש בסגנונות סטטיים ב-React Router, תצטרך ליצור אובייקט בסגנון ולאחר מכן להעביר אותו כארגומנט לאביזר הסגנון של הרכיב. לדוגמה:

const myStyle = {
צבע רקע: '#f2f2f2',
fontSize: '20px',
צבע: '#000'
};