Redux Uygulamasına React Router Kurulumu

Önceki derslerde Redux ile çalışmak için temel araçları kurduk. Genellikle bir uygulamanın web sayfaları arasında gezinmek için bir yönlendiriciye ihtiyacı olur ve uygulamamız bir istisna olmayacak. Bunun için React Router kütüphanesini kuracağız.

Projemizi açalım ve terminalde aşağıdaki komutu yazalım:

terminalnpm install react-router-dom

Biraz ileriye giderek söyleyeyim, Redux uygulamamız geleneksel olarak ürünlere adanmıştır, bilgileri bazı satıcılar tarafından paylaşılır. Bu yüzden şimdi ana App bileşenini biraz değiştireceğiz, ayrıca uygulamaya yönlendirme yapmak için işlevsellik ekleyeceğiz.

Başlangıç olarak src klasörüne, ardından app klasörüne girelim ve burada root.jsx dosyasını oluşturalım. Bu sitemizin kökü olacak: solda bir menü, sağda ise içerik olacak (şimdilik burada sadece bir başlık var):

app/root.jsxfunction Root() {
  return (
    <div id="main">
      <div id="menu">
        <nav>
          <a>Ürünler</a>
          <a>Satıcılar</a>
        </nav>
      </div>
      <div id="main_page">
        <h2>Bu benim ilk Redux uygulamam!</h2>
        <hr></hr>
      </div>
    </div>
  )
}

export default Root

App bileşenini ise değiştireceğiz. Başlangıç olarak içeriğini tamamen silelim. Sonra yönlendirici için iki fonksiyonu ve kök bileşenimiz Root'u içe aktaralım:

App.jsximport { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Root from './app/root'

Aşağıda, içe aktarmalardan sonra bir yönlendirici oluşturalım, ve ilk rotayı yazalım, ona görüntülenecek öğe olarak Root'u verelim ve buna uygun olarak yolu '/' olarak ayarlayalım. İlerleyen kısımlarda App'e gerekli diğer rotaları da ekleyeceğiz:

App.jsxconst router = createBrowserRouter([{ path: '/', element: <Root /> }])

Aşağıda App fonksiyonunun kodunu yazalım:

App.jsxfunction App() {
  return <RouterProvider router={router} />
}

export default App

Hepsi bu kadar. Çalıştıralım. Bir sonraki bölümde Redux uygulaması için bileşenleri gerçekleştireceğiz.

Son olarak biraz güzellik katmak için, bunun için index.css dosyasına stiller yazalım:

index.cssbody {
  font-size: 24px;
  line-height: 1.5;
}

nav {
  display: flex;
  flex-direction: column;
}

ul {
  list-style: none;
  padding: 0;
}

h1, h2, h3 {
  margin: 0;
}

a {
  text-decoration: none;
  color: blue;
  cursor: pointer;
}

#main {
  display: flex;
  margin: 20px;
}

#menu {
  margin-right: 50px;
  padding-top: 50px;
  padding-right: 50px;
  border-right: 2px solid lightgray;
  font-weight: bold;
}