Çözüldü: tepki yönlendirici v6 ile yönlendirme

React Router v6 ile yönlendirme ile ilgili temel sorun, bir yönlendirme gerçekleştiğinde bileşenin yeniden oluşturmamasıdır. Bu, yönlendirme gerçekleştiğinde bileşenle ilişkili herhangi bir durumun veya donanımın güncellenmeyeceği ve bu değerlerde yapılan değişikliklerin yeni sayfaya yansıtılmayacağı anlamına gelir. Ek olarak, React Router v6 sorgu dizelerini desteklemediğinden, URL'de iletilen herhangi bir sorgu parametresi de yönlendirme sırasında kaybolacaktır.

import { Redirect } from "react-router-dom";

<Redirect to="/home" />

1. Bu satır, Redirect bileşenini tepki-yönlendirici-dom kitaplığından içe aktarır.

2. Bu satır, kullanıcıyı “/home” rotasına yönlendirecek bir Yönlendirme bileşeni oluşturur.

React Router v6'da nasıl yönlendirme yapabilirim?

v6

React Router v6 adlı yeni bir bileşen sağlar. kullanıcıları bir sayfadan diğerine yönlendirmek için kullanılabilir. Bunu kullanmak için, Redirect bileşenini tepki-router-dom paketinden içe aktarmanız ve ardından rota yapılandırmanızda kullanmanız yeterlidir. Bir kullanıcı 'from' prop'ta belirtilen yolu ziyaret ettiğinde, 'to' prop'ta belirtilen yola yönlendirilir. Örneğin:

{ Redirect } 'react-router-dom'dan içe aktarın;
} />

Oturum açtıktan sonra tepki yönlendirici v6'da nasıl yönlendiririm

Başarılı bir oturum açma işleminden sonra yeniden yönlendirme, web uygulamalarında yaygın olarak kullanılan bir özelliktir. React Router v6'da, Başarılı bir oturum açtıktan sonra kullanıcıyı yönlendirmek için bileşen.

Bunu yapmak için, kullanıcının oturum açıp açmadığını kontrol eden ve ardından onu buna göre yönlendiren bir rota oluşturmanız gerekir. Örneğin:

{
eğer (LoggedIn ise) {
dönüş ;
} Else {
dönüş ;
}
}} />

Bu örnekte, kullanıcının oturum açıp açmadığını kontrol ediyoruz ve ardından LoginPage bileşenini işliyoruz veya /dashboard'a yönlendiriyoruz. Prop'ları Redirect bileşenine şu şekilde de iletebilirsiniz: Bu, kullanıcının yeniden yönlendirilmeden önce nerede olduğunu takip etmenizi sağlar.

Reaksiyonda otomatik olarak nasıl yönlendiririm

React Router, belirli koşullar karşılandığında kullanıcıları otomatik olarak yönlendirmek için kullanılabilen bir Yönlendirme bileşeni sağlar. Kullanmak için yönlendirmek istediğiniz yolu prop olarak geçmelisiniz. Gerekirse durum ve/veya sorgu parametreleri olan bir nesneyi de iletebilirsiniz.

Otomatik olarak yeniden yönlendirme yapmak için, bileşeni bir Rota bileşeni içinde kullanmanız ve yeniden yönlendirmenin ne zaman gerçekleşeceğine ilişkin bir koşul ayarlamanız gerekir. Örneğin, kullanıcıları bir bağlantıya tıkladıktan sonra uygulamanızın ana sayfasından oturum açma sayfasına yönlendirmek isterseniz, şöyle bir şey yapabilirsiniz:

{LoggedIn mi? : }

Bu örnekte, yönlendirmeyi ne zaman gerçekleştirmemiz gerektiğine ilişkin koşul olarak isLoggedIn boolean değişkenini (başka bir yere ayarlanması gerekir) kullanıyoruz. Doğruysa, Home bileşenimizi oluştururuz; aksi takdirde yönlendirmeyi gerçekleştiririz.

5 saniye tepki verdikten sonra nasıl yönlendirirsiniz?

React Router'da 5 saniye sonra yeniden yönlendirme yapmak için setTimeout() işlevini kullanarak history.push() yöntemini argüman olarak istenen rotayla birlikte çağırabilirsiniz.

Örnek:
{ useHistory } dosyasını “react-router-dom”dan içe aktarın;
const geçmişi = useHistory();
setTimeout(() => {
tarih.push(“/redirectedPage”);
}, 5000);