React Router'da Başka Bir Rota'ya Yönlendirme

Ürün düzenlenirken forma girilen veriler kaydediliyor, ancak bir SORUN var - veriler kaydedildikten sonra form sayfasında kalıyoruz, oysa ürün sayfasına geri dönmemiz gerekiyor. Bu derste tanışacağımız yönlendirme bunda bize yardımcı olacak.

Hadi edit.jsx dosyasını açalım ve kütüphaneden redirect içe aktaralım:

import { redirect } from 'react-router-dom';

Sonra, action fonksiyonunun artık 1 döndürmesini değil, bizi gerekli rotaya yönlendirmesini sağlayalım. Bu durumda ürün sayfasına geri dönmemiz gerekiyor:

return redirect(`/products/${params.productId}`);

Şimdi, kaydet butonuna tıkladığımızda güncellenmiş verilerle ürün sayfasına geri dönüyoruz.

Aynı şeyi yeni ürün ekleme için de yapabiliriz, çünkü muhtemelen hemen forma gidip doldurmak daha uygun olurdu. Hadi öyle yapalım.

Öncelikle şimdi root.jsx dosyasını açmamız ve ürün ekleme işlemi ana sayfada gerçekleştiği için redirect içe aktarmamız gerekiyor:

import { redirect } from 'react-router-dom';

Yine action fonksiyonunu alıyoruz ve artık product döndürmeyip, düzenleme sayfasına yönlendirme yapacağız:

return redirect(`/products/${product.id}/edit`);

Bunu da kontrol edelim. Şimdi ürün ekleme butonuna tıklayalım ve onu düzenlemek için formu görelim.

Önceki derslerin ödevlerinde oluşturduğunuz uygulamayı alın. Ders materyallerinden faydalanarak, form sayfasındaki verileri kaydetme butonuna tıklandıktan sonra öğrenci sayfasına yönlendirme gerçekleştirin.

Şimdi de, ana sayfadan öğrenci listesine öğrenci ekleme butonuna tıklandıktan sonra, öğrenci verilerini düzenleme form sayfasına yönlendirme gerçekleştirin.