Bazı web sitelerinde, site içindeki mevcut konumunuzu belirten bu küçük metin parçalarını hiç fark ettiniz mi? Bunlara kırıntı denir ve özellikle karmaşık web sitelerinde gezinirken kullanıcıları yönlendirmenin yararlı bir yolu olabilirler. Bu makale size React.js'de kırıntıların nasıl oluşturulacağını gösterecektir.

Ekmek Kırıntıları Nedir ve Nasıl Önemlidir?

İçerik haritaları, genellikle bir web sitesindeki geçerli konumu gösteren küçük metin parçalarıdır. Özellikle birkaç sayfaya sahip web sitelerinde gezinirken kullanıcıları yönlendirmede yardımcı olabilirler. Bir bağlantı izi sağlayarak, kırıntılar kullanıcıların bir web sitesinde nerede olduklarını anlamalarına yardımcı olabilir ve önceki bölümlere kolayca geri dönmelerine olanak tanır.

Kırıntıların bir web sitesinde birincil gezinme aracı olarak kullanılmaması gerektiğine dikkat etmek önemlidir. Aksine, menü veya arama çubuğu gibi diğer gezinme öğelerine ek olarak kullanılmalıdırlar.

React.js'de İçerik Kırıntıları Nasıl Oluşturulur

instagram viewer

React.js'de içerik haritaları oluşturmanın iki ana yolu vardır: tepki-yönlendirici-dom kitaplığı kullanarak veya React-router-kırıntılarını kullan kütüphane. Ama başlamadan önce yapmanız gereken bir React uygulaması oluştur.

Yöntem 1: tepki-yönlendirici-dom Kitaplığını Kullanarak

tepki-yönlendirici-dom kitaplığıyla, React uygulamanızdaki her yol için manuel olarak içerik haritaları oluşturabilirsiniz. Kütüphane bir ekmek kırıntıları oluşturmak için kullanılabilecek bileşen.

tepki-yönlendirici-dom kitaplığını kullanmak için önce onu npm kullanarak yüklemeniz gerekir:

npm düzenlemek tepki-yönlendirici-dom

Kitaplık kurulduktan sonra onu React bileşeninize aktarabilirsiniz:

içe aktarmak { Bağlantı } itibaren 'tepki-yönlendirici-dom'

daha sonra kullanabilirsiniz kırıntıları oluşturmak için bileşen:

<bağlantı ="/">Ev</Link>
<bağlantı ="/products">Ürünler</Link>
<bağlantı ="/products/1">Ürün 1</Link>

Artık içerik haritalarına biraz stil ekleyebilir ve bulunduğunuz sayfayı vurgulayabilirsiniz. Bunun için kullanabilirsiniz sınıf adı pervane bileşen. Geçerli yol adını almak için, konum tepki-yönlendirici-dom kitaplığından nesne:

içe aktarmak { Bağlantı, Konum Kullan } itibaren 'tepki-yönlendirici-dom'
işlevGaleta unu() {
sabit konum = konum kullan();
geri dönmek (
<gezinme>
<bağlantı ="/"
 className={konum.yoladı "/"? "ekmek kırıntısı aktif": "kırıntı aktif değil"}
>
 Ev
</Link>
<bağlantı ="/products"
 className={location.pathname.startsWith("/products")? "ekmek kırıntısı aktif": "kırıntı aktif değil"}
>
 Ürünler
</Link>
<bağlantı ="/products/1"
 className={konum.yoladı "/products/1"? "ekmek kırıntısı aktif": "kırıntı aktif değil"}
>
 Ürün 1
</Link>
</nav>
 );
}
ihracatvarsayılan Galeta unu;

Şimdi, yeni bir CSS dosyası oluşturun ve adlandırın ekmek kırıntıları.css. Dosyaya aşağıdaki CSS kurallarını ekleyin:

.breadcrumb-etkin değil {
 renk: #cccccc;
}
.breadcrumb-etkin {
 renk: #000000;
}
.kırıntı-ok {
 sol kenar boşluğu: 10 piksel;
 sağ kenar boşluğu: 10 piksel;
}

Şimdi, CSS dosyanızı React bileşeninize aktarın ve ekmek kırıntısı oku sınıf senin bileşenler:

içe aktarmak { Bağlantı, Konum Kullan } itibaren 'tepki-yönlendirici-dom'
içe aktarmak "./breadcrumbs.css";
işlevGaleta unu() {
sabit konum = konum kullan();
geri dönmek (
<gezinme>
<bağlantı ="/"
 className={konum.yoladı "/"? "ekmek kırıntısı aktif": "kırıntı aktif değil"}
>
 Ev
</Link>
<yayılma sınıfıAdı="ekmek kırıntısı oku">&gt;</span>
<bağlantı ="/products"
 className={location.pathname.startsWith("/products")? "ekmek kırıntısı aktif": "kırıntı aktif değil"}
>
 Ürünler
</Link>
<yayılma sınıfıAdı="ekmek kırıntısı oku">&gt;</span>
<bağlantı ="/products/1"
 className={konum.yoladı "/products/1"? "ekmek kırıntısı aktif": "kırıntı aktif değil"}
>
 Ürün 1
</Link>
</nav>
 );
}
ihracatvarsayılan Galeta unu;

Var React'te farklı kanca türleri. tepki-yönlendirici-dom kitaplığının kullanım yeri kanca, geçerli URL yolu hakkında bilgi içeren konum nesnesine erişmenizi sağlar.

bu bileşenin className pervanesi, kırıntılara bir CSS sınıfı ekler. className prop, bir dize veya bir dizi dizi alır. Bu bir dize ise, dizeyi öğeye tek bir sınıf olarak ekleyecektir. Bir dize dizisiyse, dizideki her dize ayrı bir sınıf olarak eklenecektir.

bu ile başlar yöntem, geçerli yol adının "/products" ile başlayıp başlamadığını kontrol eder. Bunun nedeni, ürünler sayfasının içerik haritasının yalnızca yol "/products" olduğunda değil, aynı zamanda yol "/products/1", "/products/2" vb. olduğunda da etkin olması gerektiğidir.

Yöntem 2: use-react-router-breadcrumbs Kitaplığını Kullanarak

React'te içerik haritaları oluşturmanın başka bir yolu da use-react-router-breadcrumbs kütüphanesini kullanmaktır. Bu kitaplık, React uygulamanızda tanımlanan yollara dayalı olarak otomatik olarak içerik haritaları oluşturur.

Bu kitaplığı kullanmak için önce npm kullanarak yüklemeniz gerekir:

npm düzenlemekkullanmak-react-router-kırıntıları

Kitaplık kurulduktan sonra onu React bileşeninize aktarabilirsiniz:

içe aktarmak ekmek kırıntılarını kullan itibaren "react-router-breadcrumbs kullan"

daha sonra kullanabilirsiniz ekmek kırıntılarını kullan ekmek kırıntıları oluşturmak için kanca:

sabit ekmek kırıntıları = useBreadcrumbs();
konsol.log (kırıntılar);

Bu, bir dizi içerik haritası nesnesini konsola kaydeder. Her kırıntı nesnesi, yol hakkında ad, yol ve parametreler gibi bilgiler içerir.

Artık ekmek kırıntılarınızı ekrana aktarabilirsiniz. kullanabilirsiniz kırıntılarınızı oluşturmak için tepki yönlendirici kitaplığından bileşen:

içe aktarmak { Bağlantı } itibaren 'tepki-yönlendirici-dom'
içe aktarmak ekmek kırıntılarını kullan itibaren "react-router-breadcrumbs kullan"
sabit rotalar = [
 { yol: '/users/:userId', kırıntı: 'örnek 1' },
 { yol: '/data', kırıntı: 'Örnek 2' }
];
işlevGaleta unu() {
sabit ekmek kırıntıları = ekmek kırıntılarını kullan (yollar);
konsol.log (kırıntılar)
geri dönmek (
<gezinme>
 {breadcrumbs.map(({ maç, kırıntı }) => (
<Bağlantı anahtarı={match.url} ile={match.url}>
 {kırıntı} /
</Link>
 ))}
</nav>
 );
}
ihracatvarsayılan Galeta unu;

Bağlantı bileşeni, tepki-yönlendirici-dom kitaplığından içe aktarılır. Bu bileşeni, uygulamanın diğer bölümlerine bağlantılar oluşturmak için kullanacaksınız. ayrıca yapabilirsin korumalı rotalar oluştur Bağlantı bileşenini kullanarak.

Bir rota nesneleri dizisi oluşturulur. Her rota nesnesi bir yol ve bir kırıntı özelliği içerir. path özelliği, URL yoluna karşılık gelir ve breadcrumb özelliği, breadcrumb'ın adına karşılık gelir.

bu ekmek kırıntılarını kullan kanca kırıntıları oluşturmak için kullanılır. Bu kanca, bir yol dizisini parametre olarak kabul eder. Yollar, ekmek kırıntılarını oluşturmak için kullanılır.

Harita yöntemi, kırıntı dizisini yinelemek için kullanılır. Her ekmek kırıntısı için bir bileşen oluşturulur. Bağlantı bileşeni bir ile içerik haritasının URL yoluna karşılık gelen prop. Ekmek kırıntısının kendisi, içeriğin içeriği olarak işlenir. bileşen.

Artık ekmek kırıntılarına biraz stil ekleyebilirsiniz. Yeni bir CSS dosyası oluşturun ve adlandırın Breadcrumbs.css. Bundan sonra, dosyaya aşağıdaki CSS kurallarını ekleyin:

.breadcrumb-etkin değil {
 renk: #cccccc;
}
.breadcrumb-etkin {
 renk: #000000;
}

Artık CSS dosyasını React bileşenine aktarabilir ve kırıntı sınıflarını bileşenler:

içe aktarmak { Bağlantı, Konum Kullan } itibaren 'tepki-yönlendirici-dom'
içe aktarmak ekmek kırıntılarını kullan itibaren "react-router-breadcrumbs kullan"
içe aktarmak "./Breadcrumbs.css";
sabit rotalar = [
 { yol: '/users/:userId', kırıntı: 'örnek 1' },
 { yol: '/data', kırıntı: 'Örnek 2' }
];
işlevGaleta unu() {
sabit ekmek kırıntıları = ekmek kırıntılarını kullan (yollar);
sabit konum = kullanımKonum()
geri dönmek (
<gezinme>
 {breadcrumbs.map(({ maç, kırıntı }) => (
<Bağlantı 
 anahtar={match.url} 
 ={match.url}
 className={match.pathname location.pathname? "ekmek kırıntısı aktif": "kırıntı aktif değil"}
>
 {kırıntı} / 
</Link>
 ))}
</nav>
 );
}
ihracatvarsayılan Galeta unu;

Breadcrumbs ile Kullanıcı Etkileşimini Artırın

Breadcrumbs ile, kullanıcıların web sitenizin neresinde olduklarını anlamalarına yardımcı olmakla kalmaz, aynı zamanda kullanıcı etkileşimini de artırabilirsiniz. İçerik haritaları, kullanıcının kayıt işlemi veya satın alma gibi bir görevdeki ilerlemesini göstermek için kullanılabilir. Kullanıcının ilerlemesini göstererek onları görevi tamamlamaya teşvik edebilirsiniz.

Kullanılabilirlik, erişilebilirlik ve mobil uyumluluk gibi bir web sitesi tasarlarken aklınızda bulundurmanız gereken başka birçok şey daha vardır. Ancak, bunları aklınızda tutarsanız, hem kullanıcı dostu hem de ilgi çekici bir web sitesi oluşturabilirsiniz.