React Router'da İstemci Tarafında Yönlendirme
Bu derste, tek sayfalı uygulamaların (SPA) önemli bir bileşeni olan - istemci tarafında yönlendirmeyi inceleyeceğiz. Bu tür yönlendirme, tarayıcıdaki URL'yi sunucudan belge için ek istekler olmadan güncellememize olanak tanır.
Önceki derste oluşturduğumuz uygulamayı
başlatın. Geliştirici panelini açın ve
içinde 'Ağ' sekmesini (Chrome için Network)
açın. Bağlantılarımıza her tıkladığımızda
her seferinde document için bir istek
görüyoruz. Yani sunucudan bize document
yüklemesini her seferinde istiyoruz.
Şimdi React Router'ın avantajlarını
kullanarak bu tür isteklerden kurtulalım.
Bunun için uygulamamızın root.jsx
dosyasını açalım ve biçimlendirmedeki
a etiketini Link bileşeniyle
değiştirelim. Önce onu içe aktarmayı ekleyelim:
import { Outlet, Link } from 'react-router-dom';
Şimdi href niteliğine sahip
a etiketlerini değiştirelim.
Kod parçası yerine:
<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>
Artık aşağıdaki koda sahip olacağız:
<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>
Geliştirici panelinde 'Ağ'
sekmesini tekrar açın, adres çubuğuna
kök yolu yazın ve sayfayı yenileyin.
Şimdi bağlantılara tıklayın ve
document'ımızın sadece ilk yüklemede
istendiğini ve sonraki tıklamalarda
sunucuya artık istek olmadığını görün.
Önceki derslerin ödevlerinde oluşturduğunuz uygulamayı alın. Dersteki materyalleri kullanarak, bağlantılarınızı derste anlatıldığı gibi değiştirerek istemci tarafında yönlendirmeyi uygulayın.
