Çözüldü: verileri ilet gezinmek tepki yönlendirici dom

React Router DOM ile gezinirken veri aktarma ile ilgili temel sorun, verilerin URL sorgu dizesinde iletilmesi gerektiğidir. Bu, hassas bilgilerin URL'de görüneceği için iletilmeden önce kodlanması gerektiği anlamına gelir. Ayrıca, veriler çok büyükse bir URL'nin maksimum uzunluğunu aşabilir ve hatalara neden olabilir. Son olarak, bir uygulama içindeki sayfalar arasında gezinmek için React Router DOM kullanıyorsanız, tüm bileşenlerin aynı verilere erişimi olduğundan emin olmak için durumu manuel olarak yönetmeniz ve değişiklikleri takip etmeniz gerekir.

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

const MyComponent = () => {
  const history = useHistory();

  const handleClick = (data) => {
    history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
  };

  return (
    <button onClick={() => handleClick(data)}>Go to MyRoute</button>
  );
};

// Satır 1: Bu satır, tepki-yönlendirici-dom kitaplığından useHistory kancasını içe aktarır.
// Satır 3: Bu satır, JSX'i döndüren bir işlev olan MyComponent adlı bir sabit bildirir.
// Satır 4: Bu satır, tepki-yönlendirici-dom'dan içe aktarılan useHistory kancasına atanan tarih adlı bir sabit bildirir.
// Satır 6: Bu satır, tek bir parametre olan data'yı alan handleClick adlı bir işlevi bildirir.
// Satır 7: Bu satır, '/myroute' yol adı ve bir nesne olarak iletilen durum verileri ile yığına yeni bir rota göndermek için geçmiş nesnesini kullanır.
// Satır 9 – 11: Bu satırlar, handleClick'i çağıran ve verileri argüman olarak ileten bir onClick olay işleyicisine sahip bir düğme öğesi içeren JSX'i döndürür.

Tepki Yönlendirici Dom

React Router DOM, geliştiricilerin React uygulamalarında rotalar oluşturmasına ve yönetmesine olanak tanıyan bir React yönlendirme kitaplığıdır. Link, Route, Switch ve BrowserRouter gibi bileşenler de dahil olmak üzere React ile karmaşık, çok sayfalı web uygulamaları oluşturmak için gerekli temel bileşenleri sağlar. Ayrıca dinamik rota eşleştirme ve konum takibi gibi özellikler de sağlar. React Router DOM ile geliştiriciler, URL'yi veya tarayıcı geçmişini manuel olarak yönetmek zorunda kalmadan birden çok görünüm ve rotaya sahip tek sayfalı uygulamaları kolayca oluşturabilir.

Tepki-yönlendirici-Dom'da gezinme yoluyla verileri nasıl iletirsiniz?

React Router'da, tarih API'sinin durum nesnesi kullanılarak veriler gezinme yoluyla iletilebilir. Durum nesnesine, bir tarafından işlenen herhangi bir bileşenin destekleri aracılığıyla erişilebilir. bileşen. Verileri iletmek için, gezinti işlevini çağırırken bunu durum nesnesine ekleyebilirsiniz. Örneğin:

const { geçmiş } = this.props;
tarih.push({
yol adı: '/bazı/yol',
durum: { bazı Veriler: 'veri' }
});