React Sayfalar Arası Geçiş Nasıl Yapılır?

React sayfalar arası geçiş için farklı route paketleri kullanır. Bunlardan en çok tercih edileni React Router Dom paketidir.

Normal websiteleri sayfalar arasında A Etiketini kullanarak geçiş yaparlar. Tek sayfa uygulamalarda bu istenmeyen bir durumdur. Çünkü A etiketi kullanıldığında sayfa yeniden yüklenir. Bu nedenle farklı sayfalar arasında geçiş yapılmasını ve bu işlem süresince sayfanın yeniden yüklenmesini önlemek için farklı paketler kullanılır.

Bu paketler sayesinde bir sayfadan diğer sayfaya geçiş yaparken sayfa yeniden yüklenmez, sayfalar arasında veri aktarımı yapılabilir ve sayfa geçmişi arasında gezinti yapılabilir.

Günümüzde çok sayıda Router paketini React ile birlikte kullanbiliriz. Bunlardan bazıları şunlardır.

Yukarıdaki router paketlerinden farklı çok sayıda paket de bulunmaktadır. Bu paketlerin kendilerine göre farklılıkları bulunmaktadır. Genel olarak yaptıklar sayfalar arası geçişi sağlamaktır.

React Router Dom

Çok tercih edilen bu paket ile ilgili sitemizde farklı yazılar bulabilirsiniz. Bu yazılardan bazıları şunlardır.

Örnek Router Uygulaması

Basit bir örnek uygulamayı burada inceleyeceğiz. Oluşturduğumuz React uygulaması içerisinde üç farklı component kullanacağız ve bu componentler arasında geçiş yapacağız. React Router Dom ile bu işlemi gerçekleştireceğiz. Tüm uygulamamızı App.js dosyası içerisine yazıyoruz. Siz isterseniz componentleri farklı dosyalara yazarak import ederek de kullanabilirsiniz.

Öncelikle App componentimizi oluşturalım.

import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <div>
        <Routes>
          <Route path='/' element={<Anasayfa />} />
          <Route path='/hakkinda' element={<Hakkinda />} />
          <Route path='/iletisim' element={<Iletisim />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

App komponenti yukarıdaki gibidir.

BrowserRouter tüm sayfaları sarmak zorundadır. Aksi halde yönlendirme yapılmayacaktır.
Router içerisinde tüm sayfalar ve onlara giden yollar (Route) tanımlanmaktadır.
Route componenti route tanımlaması için kullanılır. path ile route (sayfa adresi) tanımlanır ve element ile gidilecek component belirtilir.

Öncelikle bir Menu componenti oluşturalım. Bu componenti de aynı dosya içerisinde oluşturuyoruz. Siz isterseniz farklı dosya içerisinde oluşturarak import edebilirsiniz.

function Menu() {
    return(
        <ul>
            <li><Link to='/'>Anasayfa</Link></li>
            <li><Link to='/hakkinda'>Hakkında</Link></li>
            <li><Link to='/iletisim'>İletişim</Link></li>
        </ul>
    );
}

React Router ile sayfalar arasında geçiş için Link componentini kullanıyoruz. Bu component to adında bir özellik alır ve buraya gidilecek sayfanın yolunu atarız.

Biz aynı dosya içerisinde bu üç componenti tanımlayacağız. İsterseniz farklı dosyalar içerisinde oluşturarak import edebilirsiniz.

function Anasayfa() {
    return (
        <div>
            <Menu />
            <h1>Anasayfa</h1>
        </div>
    );
}

function Hakkinda() {
    return (
        <div>
            <Menu />
             <h1>Hakkında</h1>
        </div>
    );
}

function Iletisim() {
    return (
        <div>
            <Menu />
            <h1>İletişim</h1>
        </div>
    );
}

Sadece başlık dönen üç farklı component tanımladık ve her componentin içerisine de menumüzü ekledik. Uygulamayı çalıştırdığımızda aşağıdaki sayfa ile karşılaşacağız. Ve sonrasın linklere tıkladığımızda geçiş yapabiliriz.

Sonuç

React sayflar arası geçiş için farklık paketler kullanır. Bunlardan bazılarını yukarıda saydık. Geliştirilen uygulama için uygun olan bir tanesi seçilerek kullanılabilir.

React js ile ilgili sormak istediklerinizi yorumlardan bize iletebilirsiniz.

React Router Dom

Örnek Router Uygulaması

Sonuç

Yorum bırakın Yanıtı iptal et