Çözüldü: ortak klasördeki stilleri kullanarak yönlendiriciye tepki verin

Ortak klasördeki stilleri kullanan React Router ile ilgili temel sorun, stilleri takip etmenin ve doğru şekilde uygulandıklarından emin olmanın zor olabilmesidir. Ortak klasör, React bileşen ağacının bir parçası olmadığı için, hangi stillerin ne zaman uygulandığını bilmek zor olabilir. Ayrıca, birden çok bileşen ortak klasörden aynı stili kullanıyorsa ortaya çıkan sorunların hatalarını ayıklamak zor olabilir.

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { createGlobalStyle } from 'styled-components';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
 
const GlobalStyle = createGlobalStyle` 
    body { 
        margin: 0; 

        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 
            "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 
            sans-serif;

        -webkit-font-smoothing: antialiased;

        -moz-osx-font-smoothing: grayscale;  

    }  

    code {  font-family: sourcecode pro, Menlo, Monaco, Consolas, Courier New, monospace; }  

    *{ boxsizing: borderbox;}  

    img{ maxwidth: 100%;}  

    a{ textdecoration : none;}     `; // Global styles for the entire app. This will be applied to all components. 
     const App = () => ( // The main component of the app. This is where all routes are defined.      <Router>       <div>         <GlobalStyle />          <Route exact path="/" component={HomePage} />          <Route path="/about" component={AboutPage} />       </div>     </Router> ); export default App;

1. React'i 'react'ten içe aktarın; // React kütüphanesini içeri aktarıyoruz
2. 'react-router-dom'dan { BrowserRouter as Router, Route } dosyasını içe aktarın; // React-router-dom kitaplığından BrowserRouter ve Route bileşenlerini içe aktarma
3. 'styled-components'tan { createGlobalStyle } içe aktarın; // styled-components kitaplığından createGlobalStyle işlevini içe aktarma
4. Ana Sayfayı './pages/HomePage'den içe aktarın; // Ana Sayfa bileşenini içe aktarma
5. AboutPage'i './pages/AboutPage'den içe aktarın; // AboutPage bileşenini içe aktarma
6. const GlobalStyle = createGlobalStyle`…`; // Tüm uygulama için genel stiller. Bu, tüm bileşenlere uygulanacaktır.
7. const Uyg = () => (…); // Uygulamanın ana bileşeni. Burası tüm rotaların tanımlandığı yerdir.
8. ; // Ana Sayfa bileşenini oluşturan tam yolu "/" olan bir rota tanımlama
9. ; // AboutPage bileşenini oluşturan "/about" yolu ile bir rota tanımlama
10 dışa aktarma varsayılan Uygulaması;// Uygulamayı varsayılan olarak dışa aktarma

Stilleri Kullanma

Stiller, uygulamanın görünümünü ve hissini özelleştirmek için React Router'da kullanılabilir. Stiller, özel bileşenler oluşturmak, animasyonlar eklemek ve daha fazlası için kullanılabilir. Stiller, farklı ekran boyutlarına uyum sağlayan duyarlı düzenler oluşturmak için de kullanılabilir. Ayrıca stiller, uygulama için kullanıcıların deneyimlerini kişiselleştirmelerine olanak tanıyan temalar oluşturmak için kullanılabilir.

Ortak Klasörü Kullanma

React Router'daki ortak klasör, resimler, CSS ve JavaScript gibi statik dosyaları depolamak için kullanılabilen özel bir klasördür. Bu dosyalar, React uygulaması tarafından işlenmeden doğrudan ortak klasörden sunulur. Bu, daha hızlı yükleme sürelerine olanak tanır ve bir uygulamanın birden çok sayfasındaki varlıkları yönetmeyi kolaylaştırır. Ortak klasör, belirli dosyaları Git gibi sürüm kontrol sistemlerinin dışında tutmanın bir yolunu da sağlar, bu da güvenlik ve gizliliğin korunmasına yardımcı olabilir.

React'te ortak klasörden bir CSS dosyasını nasıl içe aktarırım?

React Router'da, Link bileşenini kullanarak ortak klasörden bir CSS dosyasını içe aktarabilirsiniz. Bağlantı bileşeni, href özniteliğinde dosyanın yolunu belirtmenize olanak tanır. Örneğin:

Bu, styles.css dosyasını ortak klasörünüzden React Router uygulamanıza aktaracaktır.

İlgili Mesajlar:

Leave a Comment