HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!
React Router Kullanarak React'te 404 Sayfası Nasıl Oluşturulur?
Er ya da geç, bir kullanıcı web sitenizde bulunmayan bir URL'yi ziyaret edecektir. Kullanıcının bundan sonra ne yapacağı size kalmış. Geri düğmesine basıp sitenizden ayrılabilirler. Bunun yerine, web sitenizde gezinmeye devam etmelerine yardımcı olmak için yararlı bir 404 sayfası sağlayabilirsiniz. React web sitelerinde, kullanışlı bir 404 not found sayfası oluşturmak için React router kullanabilirsiniz.
404 hatası, bir web sitesinde sunucunun bulamadığı bir sayfayı ziyaret etmeye çalıştığınızda ortaya çıkar. Bir geliştirici olarak 404 hatalarını ele almak, sunucunun istenen sayfayı bulamadığında yerine kullanacağı bir sayfa oluşturmak anlamına gelir. React'te bunu, mevcut olmayan rotalarda render alacak bir not found bileşeni oluşturarak yaparsınız. Bu makale, yönlendirme ayarlı çalışan bir React uygulamanız olduğunu varsayar. Eğer yoksa, bir React uygulaması oluşturun ve ardından React Router'ı yükleyin.
404 hatası, bir web sitesinde sunucunun bulamadığı bir sayfayı ziyaret etmeye çalıştığınızda ortaya çıkar. Bir geliştirici olarak 404 hatalarını ele almak, sunucunun istenen sayfayı bulamadığında yerine kullanacağı bir sayfa oluşturmak anlamına gelir. React'te bunu, mevcut olmayan rotalarda render alacak bir not found bileşeni oluşturarak yaparsınız. Bu makale, yönlendirme ayarlı çalışan bir React uygulamanız olduğunu varsayar. Eğer yoksa, bir React uygulaması oluşturun ve ardından React Router'ı yükleyin.
NotFound.js adında yeni bir dosya oluşturun ve 404 sayfasını oluşturmak için aşağıdaki kodu ekleyin.
Kod:
import { Link } from "react-router-dom";
export default function NotFound() {
return (
<div>
<h1>Oops! Kaybolmuş görünüyorsun.</h1>
<p>İşte bazı yararlı bağlantılar:</p>
<Link to='/'>Ana Sayfa</Link>
<Link to='/blog'>Blog</Link>
<Link to='/contact'>İletişim</Link>
</div>
)
}Bu 404 sayfası, kullanıcıyı web sitesindeki genel sayfalara yönlendirmek için bir mesaj ve bağlantılar görüntüler.
React yönlendiricisini kullanarak şu şekilde normal bir rota oluşturabilirsiniz:
React yönlendiricisini kullanarak şu şekilde normal bir rota oluşturabilirsiniz:
Kod:
import { Route, Routes } from "react-router-dom";
function App() {
return (
<Routes>
<Route path="/" element={ <Home/> }/>
</Routes>
)
}URL yolunu ve bu rotada işlemek istediğiniz öğeyi belirtirsiniz.
404 sayfası, web sitesinde bulunmayan yollar için görüntülenir. Bu nedenle, yolu belirtmek yerine bir yıldız işareti (*) kullanın.
404 sayfası, web sitesinde bulunmayan yollar için görüntülenir. Bu nedenle, yolu belirtmek yerine bir yıldız işareti (*) kullanın.
Kod:
<Route path='*' element={<NotFound />}/>Kullanıldığında, rotalarda belirtilmeyen tüm URL'ler için NotFound bileşeni oluşturulur. Bir yönlendirici kullanarak React web uygulamanızda mevcut olmayan tüm URL'ler için kolayca bir 404 sayfası oluşturabilirsiniz. Tarayıcıların varsayılan bir 404 sayfası vardır, ancak özel bir sayfa oluşturmak kullanıcılarınıza neyin yanlış gittiğini ve bunu nasıl düzeltebileceklerini söylemenizi sağlar. Ayrıca markanıza uygun bir 404 sayfası da oluşturabilirsiniz.
Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)
Benzer konular
