Çözüldü: statik stiller kullanarak yönlendiriciye tepki verin

React Router ile statik stiller kullanmayla ilgili temel sorun, farklı rotaları ve bunlarla ilişkili stilleri takip etmenin zor olabilmesidir. Statik stillerde, her rotanın kendi CSS kurallarına sahip olması gerekir; bu kurallar hızla kullanışsız ve bakımı zor hale gelebilir. Ek olarak, bir stil birden fazla rotada kullanılıyorsa, kodun KURU (Kendinizi Tekrar Etmeyin) tutulmasını zorlaştıracak şekilde hepsinde çoğaltılması gerekir.

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. İlk satır, React kitaplığını içe aktarır.
2. İkinci satır, tepki-yönlendirici-dom kitaplığından BrowserRouter, Route ve Link bileşenlerini içe aktarır.
3. Üçüncü satır, stilli bileşen kitaplığından stilize edilmiş bileşeni içe aktarır.
4. Dördüncü satır, react-router-dom'dan içe aktarılan Link bileşenini kullanarak bir StyledLink bileşeni oluşturur ve bunu color: palevioletred ve font-weight: bold ile stillendirir ve ayrıca rengini beyaza çeviren ve herhangi bir metni kaldıran bir fareyle üzerine gelme efekti oluşturur. Üzerine gelindiğinde dekorasyon.
5. Beşinci satır, içinde iki Rota bileşeni bulunan (biri Ev için ve diğeri Hakkında için) bir Yönlendirici bileşeni oluşturan bir Uygulama bileşeni oluşturur. Ayrıca, her ikisi de stil amacıyla bir hr etiketiyle ayrılmış, 4. Satırda oluşturulan StyledLink bileşenini kullanarak iki bağlantının (Ana Sayfa ve Hakkında) sırasız bir listesini oluşturur.
6. Satır 8 – 11, Ana Sayfa ve Hakkında adlı iki işlevsel bileşen oluşturur; bu, her ikisinin üzerinde Satır 2'teki ilgili Rota bileşenleri tarafından çağrıldığında içlerinde ilgili adlarıyla birlikte h5 etiketlerini oluşturur (Ana Sayfa, "Ana Sayfa"yı, Hakkında ise "Hakkında"yı oluşturur ).
7. Son olarak, Satır 12, gerekirse uygulamamızın başka bir yerinde kullanılabilmesi için Uygulama bileşenini dışa aktarır.

Statik Stiller

React Router'daki statik stiller, bir bileşene uygulanan ve bileşenin durumundaki veya donanımlarındaki herhangi bir değişiklikten bağımsız olarak aynı kalan stillerdir. Bu, bir bileşenin durumuna veya donanımına bağlı olarak değişen dinamik stillerin tersidir. Statik stiller, bir uygulamada tutarlı bir görünüm ve his oluşturmak için kullanılabilir ve ayrıca geliştiricilerin, her değişiklik olduğunda bunları manuel olarak ayarlamak zorunda kalmadan bileşenleri hızlı bir şekilde tasarlamaları için kolay bir yol sağlar.

stil bileşenleri paketi

Styled-components, geliştiricilerin React uygulamalarında bileşen düzeyinde stiller oluşturmasına ve yönetmesine olanak tanıyan, React Router için popüler bir pakettir. Kapsamı tek bir bileşene ayarlanan CSS kodunu yazmanın kolay bir yolunu sağlayarak bakımını ve hata ayıklamasını kolaylaştırır. Styled-Components, stilleri birden çok bileşen arasında paylaşmayı kolaylaştırmanın yanı sıra tema desteği sağlar. Ek olarak, stilize edilmiş bileşenler, React Router'ın Link bileşeniyle birlikte kullanılabilir ve bu, geliştiricilerin uygulamaları içindeki bağlantılara stil vermesine olanak tanır.

Statik Stiller nasıl kullanılır?

Statik stiller, React Router'da satır içi stil özelliği kullanılarak kullanılabilir. Bu özellik, ayrı bir stil sayfasına ihtiyaç duymadan doğrudan bir öğeye stil uygulamanıza olanak tanır. React Router'da statik stilleri kullanmak için, bir stil nesnesi oluşturmanız ve ardından bunu bileşenin stil desteğine argüman olarak iletmeniz gerekir. Örneğin:

sabit benim Stilim = {
backgroundColor: '#f2f2f2',
fontSize: '20px',
renk: '#000'
};

İlgili Mesajlar:

Leave a Comment