React'ta react-router-dom kütüphanesi ne için kullanılır?

react-router-dom, React'te tek sayfa uygulamaları (SPA) oluşturmak için kullanılır ve istemci tarafı yönlendirmeyi sağlar.

Ne işe yarar?

• Gezinme: Kullanıcıların sayfa yeniden yüklemesi olmadan farklı "sayfalar" (bileşenler) arasında geçiş yapmasını sağlar.
• URL Yönetimi: Tarayıcı adres çubuğundaki mevcut URL'yi gösterilen bileşenle senkronize eder.
• Dinamik yönlendirme: Parametrelerle (örneğin, /users/:id) rotalar tanımlamaya ve belirli verileri yüklemeye olanak tanır.
• Programlı gezinme: Kodu kullanarak kullanıcıyı yönlendirmeye izin verir (örneğin, verileri başarıyla kaydettikten sonra).

Ana bileşenler:

• BrowserRouter: URL'yi senkronize etmek için History API'sini kullanan uygulama sarmalayıcısı.
• Routes: Rotaları tanımlamak için konteyner.
• Route: URL ile bileşen arasındaki eşleşmeyi belirler.
• Link: Sayfa yeniden yüklemesini engelleyen bağlantılar oluşturmak için bileşen.
• useNavigate: Programlı gezinme için hook.
• useParams: URL'den rota parametrelerini almak için hook.

Kullanım örneği:

// App.js
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Ana Sayfa</Link> {' '}
        <Link to="/about">Hakkımızda</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Dinamik rota örneği */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;