React Router

Merhaba, bugünkü blog konumda başlıktada gördüğünüz gibi, react router kullanarak, react.js projelerinizde nasıl routing işlemleri yapabileceğinizi basit bir şekilde anlatmayı hedefliyorum. Ufak bir web araması ile aynı konuyu ele almış onlarca blog yazısı bulabilirsiniz elbette, bunları bende okudum fakat hepsinde aynı sorun gözüme çarptı. Teorik bilgiye o kadar önem verilmişki, asıl önemli olan(bence) uygulamalı anlatım ve betimleme neredeyse hiçbir blog yazısında veya react router için hazırlanmış dökümanda karşıma çıkmadı. Bu yüzden bu blog yazısı içerisinde olabildiğince teorik bilgiyi basite indirgeyip, betimleyerek sizlere hızlı bir şekilde; React.js projelerinizde react router kütüphanesini nasıl kullanabilirim?
Sorusuna cevap vereceğiz ve örnek olması için, birlikte basit bir proje üzerinde routing işlemi için örnek bir çalışma yapacağız.

React-router kütüphanesi tam olarak ne işe yarar?

React.js de routing işlemleri için kullanabileceğiniz birçok altarnatif kütüphane bulunmaktadır, bunlar arasında en yaygın olanı ise react router ‘dur. Bunun nedeni ise kullanımının kolay olması ve tüm ihtiyaçları karşılayabiliyor olmasıdır. React-router kütüphanesi react.js prolerimiz içerisinde WEB API tarafıyla iletişimi sağlayarak router görevi görür ve tüm routing hesaplamalarını bizim yerimize yapar.

React.js projesine nasıl react router kurulur?

Öncelikle paket yükleyicisini kullanarak kütüphaneyi projeye dahil edelim.

npm i react-router-dom

Yükleme işlemini tamamladıktan sonra sonraki aşamalar için devam etmeden önce size react router ile gelen birkaç bileşenlerden bahsetmek istiyorum.

• BrowserRouter
  • Tüm bileşenlerin kullanılacağı bölümün dışına eklenir, routerların çalışacağı alanı belirlemek için kullanılır.
• Routers
  • Router’lar için kapsayıcıdır. Bunu <ul> <li> yapısındaki <ul> olarak da düşünebilirsiniz.
• Router
  • Her bir route işlemini router ile tanımlarız.
• Link
  • html’de ki <a> tag’ının görevini yapar.

Bu kısa bilgilerdende bahsettiğimize göre, artık react router ile kullanacağımız temel bileşenleri biliyorsunuz.

Yeni bir react projesi oluşturdum ve yukarıdaki “npm i react-router-dom” komutunu kullanarak gerekli dosyaları projeme dahil ettim. Şimdi ise sayfalar arasında geçiş yapabilmemi sağlayacak ufak bir navbar hazırlayacağım.

Bunun için öncelikle BrowserRouter ‘ı src klasörüm altındaki index.js dosyası içerisinde <App/> component’ımi kapsayacak şekilde kodlarıma ekliyorum.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
// as Router diyerek bu bileşeni daha sonra kullanmak istediğimde Router ismiyle çağıracağımı belirtiyorum.
import { BrowserRouter as Router } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Router>
  <App />
</Router>
);

index.js dosyama BrowseRouter bileşenimi ekledikten sonra ise sırada App.js dosyamda rota sistemini oluşturmaya geliyor.

import './App.css';
import { Routes, Route } from 'react-router-dom';
import Homepage from './components/Homepage';
import Contact from './components/Contact';
function App() {
  return (
    <div className="App">
    <Routes>
      <Route exact path='/' element={<Homepage />} />
      <Route exact path="/contact" element={<Contact/>} />
    </Routes>
    </div>
  );
}

export default App;

Homepage ve Contact adında 2 component oluşturdum ve /contact path’ine gidilmesi durumunda Contact component’inin ana dizine gidilmesi halinde ise Homepage component’inin görüntüntülenmesini istediğimi belirttim.

Son olarak Link bileşeninin kullanımını inceleyelim.

import './App.css';
import { Routes, Route, Link } from 'react-router-dom';
import Homepage from './components/Homepage';
import Contact from './components/Contact';
function App() {
  return (
    <div className="App">
      
    <Link to="/">Anasayfa</Link>
    <Link to="/contact">Contact</Link>

    <Routes>
      <Route exact path='/' element={<Homepage />} />
      <Route exact path="/contact" element={<Contact/>} />
    </Routes>

    

    </div>
  );
}

export default App;

Tıpkı html <a> etiketinin kullanılması gibi Link bileşenide aynı şekilde kullanılmaktadır. <a> etiketinde olduğu gibi Link bileşeninin başladığı ve bittiği bölümler arasına istediğimiz herşeyi ekleyebiliriz.

Diğer Parametreler:

Exact

Tam olarak eşleşmeyi temsil eder. (Genelde en sık kullanılandır.)

<Route exact path="/blog" element={<Blog/>} />

path	location	exact	eşleşme durumu
/blog	/blog/react	Yok	Eşleşti
/blog	/blog/react	Var	Eşleşmedi
/blog	/blog	Var	Eşleşti

Path

Değişkenin sağlandığı herhangi bir geçerli url’dir. Genelde parametre kullanılan path’ler için kullanılır.

<Route path="/users/:id" element={<Profile/>} />

Strict

%100 eşleşmenin sağlanmasını temsil eder.

<Route strict path="/home/" element={<Home/>} />

path	location	eşleşme durumu
/home/	/home	Eşleşmedi
/home/	/home/	Eşleşti

Sensitive

Büyük-küçük harfler hadil olmak üzere bir eşleşme sağlamak için kullanılır.

<Route sensitive path="/home" element={<Home />} />

path	location	eşleşme durumu
/home	/Home	Eşleşmedi
/home	/home	Eşleşti

Buraya kadar okuduğunuz için teşekkür ederim. Diğer yazılarıma buradan ulaşabilirsiniz.