Çözüldü: React Router v6'da nasıl yönlendirilir

React Router v6'da yönlendirme ile ilgili temel sorun, yönlendirmeler için sözdiziminin önceki sürümlere göre önemli ölçüde değişmiş olmasıdır. v6'da Redirect bileşeni yerine kullanılmalıdır. öğesi ve to prop'a yol adı özelliği içeren bir nesne sağlanmalıdır. Ek olarak, durum veya sorgu parametreleri gibi ek donanımlar da bu nesneye dahil edilmelidir. Bu, React Router'ın önceki sürümlerinin daha basit sözdizimini kullanmaya alışkın olan geliştiricileri zorlaştırabilir.

In React Router v6, you can use the <Redirect> component to redirect from one page to another.

Example: 

import { Redirect } from 'react-router-dom'; 
 
<Route exact path="/old-path"> 
   <Redirect to="/new-path" /> 
</Route>

1. 'react-router-dom'dan { Redirect } içe aktarın;
– Bu satır, Redirect bileşenini tepki-yönlendirici-dom kitaplığından içe aktarır.

2.
– Bu satır, tam yolu “/old-path” olan bir Rota bileşeni oluşturur.

3.
– Bu satır, “/eski-yol”dan “/yeni-yol”a yönlendirme yapmak için Yönlendirme bileşenini kullanır.

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

v6

React Router v6, kullanıcıları bir sayfadan diğerine yönlendirmek için kullanılabilecek bir Yönlendirme bileşeni sağlar. Redirect bileşenini kullanmak için onu tepki-yönlendirici-dom paketinden içe aktarmanız gerekir. Yönlendirme bileşeni iki destek alır: from ve to. "Kimden" pervanesi geçerli sayfanın yoludur ve "to" pervanesi, kullanıcıları yönlendirmek istediğiniz sayfanın yoludur. Örneğin, kullanıcıları /ana sayfadan /hakkında'ya yönlendirmek isterseniz, kodunuz şöyle görünür:

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

Reaksiyon yönlendiricisi nedir?

React Router, geliştiricilerin gezinme ve dinamik, durum tabanlı yönlendirme ile tek sayfalı uygulamalar oluşturmasına olanak tanıyan bir React yönlendirme kitaplığıdır. Kullanıcı arayüzünün URL ile senkronize olmasına yardımcı olarak kullanıcıların URL'leri paylaşmasını ve yer imlerine eklemesini kolaylaştırır. React Router ayrıca yavaş yükleme, rota koruması ve konum geçişi işleme gibi güçlü özellikler sunar.

Reaksiyondaki Yönlendirici türleri

React Router, geliştiricilerin gezinme ve URL yönlendirme ile tek sayfalı uygulamalar oluşturmasına olanak tanıyan, React için bir yönlendirme kitaplığıdır. Üç tür yönlendirici sağlar: BrowserRouter, HashRouter ve MemoryRouter.

BrowserRouter: Bu yönlendirici, kullanıcı arayüzünüzü URL ile senkronize halde tutmak için HTML5 geçmiş API'sini kullanır. Uygulamanızda gerçek URL'ler kullanmak istediğinizde kullanılır.

HashRouter: Bu yönlendirici, kullanıcı arayüzünüzü URL ile senkronize tutmak için URL'nin karma bölümünü (ör. #) kullanır. Gerçek URL'leri kullanmak istemediğinizde veya HTML5 geçmiş API'sini desteklemeyen eski tarayıcılarla uyumluluğa ihtiyacınız olduğunda kullanılır.

MemoryRouter: Bu yönlendirici, konumların geçmişini bellekte tutar ve tarayıcının adres çubuğuyla etkileşime girmez veya gerçek URL'ler oluşturmaz. Test amaçları için veya gerçek URL'lerin kullanılmasının istenmediği ortamlar için kullanışlıdır (örn. sunucu tarafında oluşturma).

İlgili Mesajlar:

Leave a Comment