Çözüldü: Geçmiş React Router v6 uygulamasını kullanın

History React Router v6 kullanımıyla ilgili temel sorun, hash tabanlı yönlendirmeyi desteklememesidir. Bu, tüm URL'lerin mutlak yollar olması gerektiği anlamına gelir, bu da uygulamanın yönetimini ve bakımını zorlaştırabilir. Ek olarak, birden çok sayfa içeren karmaşık uygulamalar oluştururken sorun olabilen dinamik rotalar için yerleşik bir destek yoktur. Son olarak, History React Router v6, bazı durumlarda gerekli olabilecek sunucu tarafı işleme için herhangi bir destek sağlamaz.

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useHistory,
} from "react-router-dom";

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// Bu kod, tepki-yönlendirici-dom kitaplığından BrowserRouter, Switch, Route ve useHistory bileşenlerini içe aktarır.
// Ardından, bir geçmiş nesnesi oluşturmak için useHistory kancasını kullanan App adlı bir işlev oluşturur.
// Bu geçmiş nesnesi, çağrıldığında geçmiş yığınına yeni bir giriş iten handleClick adlı bir işlevde kullanılır.
// Uygulama işlevi daha sonra, tıklandığında handleClick'i çağıran bir onClick işleyicisine sahip bir düğme içeren bazı JSX'leri döndürür.
// Son olarak, yolu “/new-location” ile eşleştiğinde NewLocation bileşenini oluşturan, içinde bir Route bileşeni bulunan bir Switch bileşeni vardır.

kullanım geçmişi nedir

useHistory, React Router tarafından sağlanan ve programlı olarak gezinmek için bileşenlerin geçmiş nesnesine erişmesine izin veren bir React Hook'tur. Yeni konumları geçmiş yığınına itmek, mevcut konumu değiştirmek, tarihte ileri geri gitmek vb. için kullanılabilir.

Tepki olarak rota geçmişini nasıl alabilirim?

React Router'da, useHistory kancasını kullanarak rota geçmişini alabilirsiniz. Bu kanca, gezinmek, uygulamanızın geçmişinde ileri geri gitmek ve daha fazlası için kullanabileceğiniz geçmiş örneğine erişim sağlar. Kullanmak için, kancayı React Router'dan içe aktarmanız ve ardından bileşeninizde çağırmanız yeterlidir:

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

const Bileşenim = () => {
const geçmişi = useHistory();

// Artık rota geçmişine 'history' nesnesi aracılığıyla erişebilirsiniz.

dönüş (…);
}

Tepki yönlendirici geçmiş API kullanıyor mu?

Evet, React Router mevcut konumu ve geçmişini takip etmek için HTML5 Geçmiş API'sini kullanır. Bu, React Router'ın sayfayı yeniden yüklemek zorunda kalmadan güncellemesini sağlayarak gezinmeyi daha hızlı ve sorunsuz hale getirir. Geçmiş API'si ayrıca derin bağlantıya izin verir, bu da kullanıcıların kendilerini doğrudan bir uygulamadaki belirli bir sayfaya götüren bağlantıları paylaşmalarını kolaylaştırır.