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 nasıl kırıntı oluşturulacağını gösterecektir.
Ekmek kırıntıları nedir ve nasıl önemlidir?
Ekmek kırıntıları, genellikle bir web sitesindeki geçerli konumu gösteren küçük metin parçalarıdır. Özellikle birkaç sayfası olan web sitelerinde gezinirken kullanıcıları yönlendirmede yardımcı olabilirler. Ekmek kırıntıları, bir bağlantı izi sağlayarak, 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.
Ekmek kırıntılarının bir web sitesinde birincil gezinme aracı olarak kullanılmaması gerektiğini unutmamak önemlidir. Bunun yerine, menü veya arama çubuğu gibi diğer gezinme öğelerine ek olarak kullanılmaları gerekir.
React.js’de Ekmek Kırıntıları Nasıl Oluşturulur
React.js’de kırıntı oluşturmanın iki ana yolu vardır: tepki-yönlendirici-dom kitaplığını kullanarak veya use-react-router-breadcrumbs kitaplığını kullanarak. Ancak başlamadan önce bir React uygulaması oluşturmalısınız .
Yöntem 1: tepki-yönlendirici-dom Kitaplığını Kullanarak
tepki-yönlendirici-dom kitaplığı ile, React uygulamanızdaki her yol için manuel olarak kırıntıları oluşturabilirsiniz. Kitaplık, içerik haritaları oluşturmak için kullanılabilecek bir <Link> bileşeni sağlar.
tepki-yönlendirici-dom kitaplığını kullanmak için önce onu npm kullanarak kurmanız gerekir:
npm install react-router-dom
Kitaplık kurulduktan sonra, onu React bileşeninize aktarabilirsiniz:
import { Link } from ‘react-router-dom’
Daha sonra içerik haritaları oluşturmak için <Link> bileşenini kullanabilirsiniz:
<Link to=”/”>Home</Link>
<Link to=”/products”>Products</Link>
<Link to=”/products/1″>Product 1</Link>
Artık içerik haritalarına biraz stil ekleyebilir ve bulunduğunuz sayfayı vurgulayabilirsiniz. Bunun için <Link> bileşeninin className özelliğini kullanabilirsiniz . Geçerli yol adını almak için , tepki-yönlendirici-dom kitaplığındaki konum nesnesini kullanabilirsiniz :
import { Link, useLocation } from ‘react-router-dom’
function Breadcrumbs() {
const location = useLocation();
return (
<nav>
<Link to=”/”
className={location.pathname === “/” ? “breadcrumb-active” : “breadcrumb-not-active”}
>
Home
</Link>
<Link to=”/products”
className={location.pathname.startsWith(“/products”) ? “breadcrumb-active” : “breadcrumb-not-active”}
>
Products
</Link>
<Link to=”/products/1″
className={location.pathname === “/products/1” ? “breadcrumb-active” : “breadcrumb-not-active”}
>
Product 1
</Link>
</nav>
);
}
export default Breadcrumbs;
Şimdi yeni bir CSS dosyası oluşturun ve buna breadcrumbs.css adını verin . Dosyaya aşağıdaki CSS kurallarını ekleyin:
.breadcrumb-not-active {
color: #cccccc;
}
.breadcrumb-active {
color: #000000;
}
.breadcrumb-arrow {
margin-left: 10px;
margin-right: 10px;
}
Şimdi, CSS dosyanızı React bileşeninize aktarın ve kırıntı-ok sınıfını <Link> bileşenlerinize ekleyin:
import { Link, useLocation } from ‘react-router-dom’
import “./breadcrumbs.css”;
function Breadcrumbs() {
const location = useLocation();
return (
<nav>
<Link to=”/”
className={location.pathname === “/” ? “breadcrumb-active” : “breadcrumb-not-active”}
>
Home
</Link>
<span className=”breadcrumb-arrow”>></span>
<Link to=”/products”
className={location.pathname.startsWith(“/products”) ? “breadcrumb-active” : “breadcrumb-not-active”}
>
Products
</Link>
<span className=”breadcrumb-arrow”>></span>
<Link to=”/products/1″
className={location.pathname === “/products/1” ? “breadcrumb-active” : “breadcrumb-not-active”}
>
Product 1
</Link>
</nav>
);
}
export default Breadcrumbs;
React’te farklı kanca türleri vardır . tepki-yönlendirici-dom kitaplığının useLocation kancası, geçerli URL yolu hakkında bilgi içeren konum nesnesine erişmenizi sağlar.
<Link> bileşeninin className özelliği, içerik haritalarına bir CSS sınıfı ekler. className prop, bir dize veya bir dizi dize alır. Bu bir dizeyse, dizeyi öğeye tek bir sınıf olarak ekler. Bu bir dize dizisiyse, dizideki her dize ayrı bir sınıf olarak eklenir.
startWith yöntemi, 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.
Uygulama ana sayfasını ekmek kırıntıları ile yanıtlayın
Yöntem 2: use-react-router-breadcrumbs Kitaplığını Kullanarak
React’te kırıntı oluşturmanın başka bir yolu, use-react-router-breadcrumbs kitaplığını kullanmaktır. Bu kitaplık, React uygulamanızda tanımlanan rotalara dayalı olarak otomatik olarak kırıntıları oluşturur.
Bu kütüphaneyi kullanmak için önce onu npm kullanarak kurmanız gerekecek:
npm install use-react-router-breadcrumbs
Kitaplık kurulduktan sonra, onu React bileşeninize aktarabilirsiniz:
import useBreadcrumbs from ‘use-react-router-breadcrumbs’
Ardından, ekmek kırıntıları oluşturmak için useBreadcrumbs kancasını kullanabilirsiniz:
const breadcrumbs = useBreadcrumbs();
console.log(breadcrumbs);
Bu, bir dizi kırıntı nesnesini konsola kaydeder. Her bir kırıntı nesnesi, ad, yol ve parametreler gibi rota hakkında bilgiler içerir.
Artık kırıntılarınızı ekrana aktarabilirsiniz. Ekmek kırıntılarınızı oluşturmak için tepki yönlendirici kitaplığındaki <Link> bileşenini kullanabilirsiniz:
import { Link } from ‘react-router-dom’
import useBreadcrumbs from ‘use-react-router-breadcrumbs’
const routes = [
{ path: ‘/users/:userId’, breadcrumb: ‘Example 1’ },
{ path: ‘/data’, breadcrumb: ‘Example 2’ }
];
function Breadcrumbs() {
const breadcrumbs = useBreadcrumbs(routes);
console.log(breadcrumbs)
return (
<nav>
{breadcrumbs.map(({ match, breadcrumb }) => (
<Link key={match.url} to={match.url}>
{breadcrumb} /
</Link>
))}
</nav>
);
}
export default Breadcrumbs;
Link bileşeni, tepki-yönlendirici-dom kitaplığından içe aktarılır. Uygulamanın diğer bölümlerine bağlantılar oluşturmak için bu bileşeni kullanacaksınız. Bağlantı bileşenini kullanarak korumalı rotalar da oluşturabilirsiniz.
Bir dizi rota nesnesi oluşturulur. Her rota nesnesi bir yol ve bir kırıntı özelliği içerir. Yol özelliği, URL yoluna karşılık gelir ve içerik haritası özelliği, içerik haritasının adına karşılık gelir.
useBreadcrumbs kancası, kırıntıları oluşturmak için kullanılır. Bu kanca, parametre olarak bir dizi yolu kabul eder. Yollar, kırıntıları oluşturmak için kullanılır.
Harita yöntemi, kırıntı dizisini yinelemek için kullanılır. Her içerik haritası için bir <Link> bileşeni oluşturulur. Link bileşeninde, içerik haritasının URL yoluna karşılık gelen bir to prop vardır. İçerik haritasının kendisi <Link> bileşeninin içeriği olarak işlenir.
Artık kırıntılara biraz stil ekleyebilirsiniz. Yeni bir CSS dosyası oluşturun ve onu Breadcrumbs.css olarak adlandırın . Bundan sonra, dosyaya aşağıdaki CSS kurallarını ekleyin:
.breadcrumb-not-active {
color: #cccccc;
}
.breadcrumb-active {
color: #000000;
}
Artık CSS dosyasını React bileşenine aktarabilir ve içerik haritası sınıflarını <Link> bileşenlerine ekleyebilirsiniz:
import { Link, useLocation } from ‘react-router-dom’
import useBreadcrumbs from ‘use-react-router-breadcrumbs’
import “./Breadcrumbs.css”;
const routes = [
{ path: ‘/users/:userId’, breadcrumb: ‘Example 1’ },
{ path: ‘/data’, breadcrumb: ‘Example 2’ }
];
function Breadcrumbs() {
const breadcrumbs = useBreadcrumbs(routes);
const location = useLocation()
return (
<nav>
{breadcrumbs.map(({ match, breadcrumb }) => (
<Link
key={match.url}
to={match.url}
className={match.pathname === location.pathname ? “breadcrumb-active” : “breadcrumb-not-active”}
>
{breadcrumb} /
</Link>
))}
</nav>
);
}
export default Breadcrumbs;
uygulama kırıntıları ve farklı yollarla tepki ver
Breadcrumbs ile Kullanıcı Etkileşimini Artırın
Ekmek kırıntıları ile kullanıcıların yalnızca web sitenizin neresinde olduklarını anlamalarına yardımcı olmakla kalmaz, aynı zamanda kullanıcı katılımını da artırabilirsiniz. İçerik haritaları, kullanıcının kaydolma 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 birçok başka şey de vardır. Ancak bunları göz önünde bulundurursanız, hem kullanıcı dostu hem de ilgi çekici bir web sitesi oluşturabilirsiniz.