React Router Dom Nedir ve Nasıl Kullanılır?

React Router paketinin kendi sitesindeki tanımı şu şekilde; “Tek görevi, URL’yi bir dizi bileşenle eşleştirmek, URL verilerine erişim sağlamak ve uygulamada gezinmek olacaktır.”

Bu tanımlamaya göre istediğimiz bileşenleri istediğimiz componentler ile eşleştirerek, ekranda ilgili componenti göstermek olacaktır. Tabi bunu URL değiştirerek yapacağız.

Bununla ilgili örnek github hesabımdam mevcut. Buradan ilgili repoya ulaşabilirsiniz.

React Router Dom kurulumu ve Projeye Dahil Edilmesi

npm install react-router-dom

//Projeye dahil edilmesi
import { Routes } from "react-router"

Proje Dosyaları

//App.jsx

import "./App.css";
import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Products from "./pages/Products";
import Category1 from "./pages/categories/Category1";
import Category2 from "./pages/categories/Category2";
import PrivateForm from "./pages/contacts/PrivateForm";
import CompanyForm from "./pages/contacts/CompanyForm";
import Contact from "./pages/Contact";
import About from "./pages/About";
import NotFound from "./pages/NotFound";
import Header from "./components/Header";

function App() {
  return (
    <div>
      <Header />
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/products" element={<Products />}></Route>
        <Route path="/categories/category1" element={<Category1 />}></Route>
        <Route path="/categories/category2" element={<Category2 />}></Route>
        <Route path="/contact" element={<Contact />}>
          <Route path="privateform" element={<PrivateForm />}></Route>
          <Route path="companyform" element={<CompanyForm />}></Route>
        </Route>
        <Route path="/about" element={<About />}></Route>
        <Route path="/*" element={<NotFound />}></Route>
      </Routes>
    </div>
  );
}

export default App;

Header Kısmı

//components/Header.jsx

import React from "react";
import { Link } from "react-router-dom";

function Header() {
  return (
    <header>
      <div className="container">
        <div className="logo">
          <Link to="/">LOGO</Link>
        </div>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
          <Link to="/products">
            Produts
            <div className="subMenu">
              <Link to="categories/Category1">Category 1</Link>
              <Link to="categories/Category2">Category 2</Link>
            </div>
          </Link>
          <Link to="/contact">Contact</Link>
        </nav>
      </div>
    </header>
  );
}

export default Header;

Projeyi biraz daha geliştirdiğim için kodları ayrı ayrı buraya almadım. Lütfen ilgili repoya göz atınız ve projede nasıl çalıştığını görünüz.

Anladığım kadarıyla anlatmaya çalıştım. Umarım faydalı olmuştur. Başka bir blog yazısında görüşmek üzere 🙂

Gönderilere yorum yazabilir veya @huseyineskan instagram hesabımdan benimle iletişime geçebilirsiniz.