React Router dış bağlantılarıyla ilgili temel sorun, farklı sayfalar arasında gezinirken beklenmeyen davranışlara neden olabilmesidir. Örneğin, bir kullanıcı bir React Router sayfasındayken harici bir bağlantıya tıklarsa, tarayıcı uygulama içindeki yeni sayfaya yönlendirmek yerine geçerli sayfadan uzaklaşacaktır. Bu, sayfalar arasında sorunsuz bir geçiş bekleyen kullanıcılar için kafa karışıklığına ve hayal kırıklığına yol açabilir. Ek olarak, arama motorları harici kaynaklardan gelen içeriği düzgün bir şekilde dizine ekleyemeyebileceğinden, harici bağlantılar da SEO ile ilgili sorunlara neden olabilir.
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. Bu satır, tepki-yönlendirici-dom kitaplığından Bağlantı bileşenini içe aktarır.
2. Bu satır, tıklandığında “https://www.example.com” adresine yönlendirecek ve yeni sayfaya yönlendirme bilgisi gönderilmeden yeni bir sekmede açacak bir bağlantı öğesi oluşturur. Bağlantının metni “Dış Bağlantı” olacaktır.
dış bağlantı nedir
React Router'daki harici bağlantı, kullanıcıyı uygulamanın dışındaki bir sayfaya götüren bir bağlantıdır. Bu, harici bir web sitesi veya başka bir uygulama olabilir. Harici bağlantılar, kullanıcılara uygulama içindeki içerikle ilgili ek bilgi veya kaynak sağlamak için kullanılır. Ayrıca, kullanıcıları daha fazla araştırma için diğer uygulamalara veya web sitelerine yönlendirmenin bir yolu olarak da kullanılabilirler.
React Router ile harici bağlantı nasıl eklenir?
React Router'da React Router ile harici bir bağlantı eklemek basit bir işlemdir. Öncelikle, reaksiyon-yönlendirici-dom paketinden Link bileşenini içe aktarmanız gerekir. Ardından, harici bir URL'ye bağlantı oluşturmak için Bağlantı bileşenini kullanabilirsiniz. Bir bağlantı oluşturmak için sözdizimi şöyle görünür:
Örneğin, Google'a bir bağlantı oluşturmak isterseniz, şöyle görünür:
Bağlantınızı oluşturduktan sonra, daha iyi erişilebilirlik ve güvenlik amaçları için hedef ve rel öznitelikleri gibi ek özellikler ekleyebilirsiniz. Örneğin:
