React Tutorial 2023 73 – Router 5 -BrowserRouter Component’i İle Route Oluşturma

Önemli: Diğer yazılarımla direkt bağlantılı bir yazıdır. İlk olarak bu yazıdan okumaya başladıysanız, eğitim serisine kısaca bir göz atmanızı tavsiye ederim.

Merhabalar.

Bu yazımda BrowserRouter Componenti ile nasıl Route oluştururuz bunlara bakacağız.

Bir önceki yazımda oluşturduğumuz proje üzerinde küçük bir güncelleme yapmamız yeterli olacak.

Her adımda işlerimizi biraz daha kolaylaştırıyoruz. BrowserRouter Route’lama işlemlerimizi diğer iki yönteme göre çok daha temiz yapmamızı sağlıyor.

BrowserRouter React Router DOM paketinin bir parçasıdır ve bir web uygulamasında URL’i ve tarayıcı geçmişini yönetmek için ve bir web uygulamasında dinamik yönlendirmeyi uygulamak için kullanılır.

BrowserRouter bileşeni, uygulamanın URL’sini dinamik olarak yönetir. Bu, kullanıcının uygulamanın farklı bölümlerine geçiş yapmasını sağlar. Örneğin, kullanıcı bir URL’ye girdiğinde veya bir bağlantıya tıkladığında, BrowserRouter bileşeni ilgili bileşeni render eder.

BrowserRouter bileşeni, aşağıdaki gibi kullanılır:

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

function App() {
 return (
   <BrowserRouter>
     <Routes>
       <Route path="/" element={<HomePage />} />
       <Route path="/about" element={<AboutPage />} />
       <Route path="/contact" element={<ContactPage />} />
       <Route path="/product" element={<ProductPage />} />
     </Routes>
   </BrowserRouter>
 );
}

Bu kod parçası, React Router v6 kullanarak bir web uygulamasında URL yönlendirmesi nasıl yapılacağını gösteriyor.

import { BrowserRouter, Route, Routes } from "react-router-dom"; satırı, BrowserRouter, Route ve Routes bileşenlerini react-router-dom paketinden import ediyor.

BrowserRouter bileşeni, uygulamanın URL’sini yönetir. Bu, bir web uygulamasında dinamik yönlendirmeyi uygulamak için kullanılır.

Routes bileşeni, bir dizi Route bileşeni alır. Her bir Route bileşeni, bir URL yolunu belirtiyor ve bu yolun karşılığında görüntülenecek bileşeni belirtir.

Route bileşeni, path ve element prop’larını alır. path prop’u, URL yolunu belirtirken element prop’u, bu yolun karşılığında görüntülenecek bileşeni belirtir.

HomePage, AboutPage, ContactPage ve ProductPage bileşenleri, sırasıyla ana sayfa, hakkında sayfası, iletişim sayfası ve ürün sayfasını temsil ediyor.

Kullanıcı bu URL’leri ziyaret ederse, BrowserRouter bileşeni ilgili bileşenleri render eder. Örneğin, kullanıcı “/about” URL’sini ziyaret ederse, AboutPage bileşeni render edilir.

Kendi uygulamamız üzerinde görelim.

Proje Güncelle

App.js’yi aşağıdaki gibi güncellemem yeterli olacaktır.

import "./App.css";
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomePage from './Pages/Home/HomePage';
import AboutPage from './Pages/About/AboutPage';
import ContactPage from './Pages/Contact/ContactPage';
import ProductPage from './Pages/Product/ProductPage';

function App() {
 return (
   <Router>
     <Routes>
       <Route path="/" element={<HomePage />} />
       <Route path="/about" element={<AboutPage />} />
       <Route path="/contact" element={<ContactPage />} />
       <Route path="/product" element={<ProductPage />} />
     </Routes>
   </Router>
 );
}

export default App;

Uygulama Test

Çıktılarıma baktığımda aynı sonucu görüyorum.

Bir sonraki yazımda görüşmek üzere.