Diselesaikan: router reaksi menggunakan gaya statis

Masalah utama terkait penggunaan gaya statis dengan React Router adalah sulitnya melacak rute yang berbeda dan gaya yang terkait. Dengan gaya statis, setiap rute harus memiliki seperangkat aturan CSS sendiri, yang dapat dengan cepat menjadi berat dan sulit dipertahankan. Selain itu, jika sebuah gaya digunakan di beberapa rute, gaya tersebut perlu diduplikasi di semua rute, membuatnya sulit untuk mempertahankan kode DRY (Don't Repeat Yourself).

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. Baris pertama mengimpor pustaka React.
2. Baris kedua mengimpor komponen BrowserRouter, Route, dan Link dari pustaka react-router-dom.
3. Baris ketiga mengimpor styled component dari styled-components library.
4. Baris keempat membuat komponen StyledLink menggunakan komponen Link yang diimpor dari react-router-dom dan menatanya dengan color: palevioletred dan font-weight: bold, serta efek hover yang mengubah warnanya menjadi putih dan menghapus teks apa pun dekorasi ketika melayang di atas.
5. Baris kelima membuat komponen Aplikasi yang menampilkan komponen Router dengan dua komponen Rute di dalamnya (satu untuk Rumah dan satu untuk Tentang). Itu juga merender daftar dua tautan yang tidak diurutkan (Beranda dan Tentang) menggunakan komponen StyledLink yang dibuat di Baris 4 di atas keduanya dipisahkan oleh tag hr untuk tujuan penataan.
6. Baris 8 – 11 membuat dua komponen fungsional yang disebut Beranda dan Tentang yang merender tag h2 dengan nama masing-masing di dalamnya saat dipanggil oleh masing-masing komponen Rute di Baris 5 di atas keduanya (Home merender “Home” sementara About merender “About” ).
7. Terakhir, Baris 12 mengekspor komponen Aplikasi sehingga dapat digunakan di tempat lain dalam aplikasi kita jika diperlukan

Gaya Statis

Gaya statis di React Router adalah gaya yang diterapkan ke komponen dan tetap sama terlepas dari perubahan apa pun pada status atau properti komponen. Ini berbeda dengan gaya dinamis, yang berubah bergantung pada status atau properti komponen. Gaya statis dapat digunakan untuk membuat tampilan dan nuansa yang konsisten di seluruh aplikasi, serta menyediakan cara mudah bagi pengembang untuk mengatur gaya komponen dengan cepat tanpa harus menyesuaikannya secara manual setiap kali ada perubahan.

paket komponen-gaya

Styled-components adalah paket populer untuk React Router yang memungkinkan pengembang membuat dan mengelola gaya tingkat komponen dalam aplikasi React mereka. Ini memberikan cara mudah untuk menulis kode CSS yang dicakup ke satu komponen, membuatnya lebih mudah untuk dipelihara dan di-debug. Styled-components juga mempermudah berbagi gaya di berbagai komponen, serta menyediakan dukungan untuk tema. Selain itu, komponen-gaya dapat digunakan dengan komponen Tautan React Router, memungkinkan pengembang untuk menata tautan dalam aplikasi mereka.

Cara menggunakan Gaya Statis

Gaya statis dapat digunakan di React Router dengan menggunakan atribut gaya inline. Atribut ini memungkinkan Anda untuk menerapkan gaya langsung ke elemen tanpa memerlukan lembar gaya terpisah. Untuk menggunakan gaya statis di React Router, Anda perlu membuat objek gaya dan meneruskannya sebagai argumen ke prop gaya komponen. Sebagai contoh:

const Gayaku = {
warna latar belakang: '#f2f2f2′,
ukuran font: '20px',
warna: '#000'
};