5- ReactJS Layout Yönetimi (React Router Dom)

Bir önceki dersimizde React Router Dom ile sayfalar arası navigation konusunu işlemiştik.

Serimizin beşincisi ile devam ediyoruz.

Eğitim Künyesi

  • Sidebar componenti oluşturma
  • Header ve Sidebar componentlerinin Layout içinde kullanımı
  • Tüm sayfaları tek bir Layoutdan türetme

React Router Dom kullanarak sayfalar arası geçişi öğrendiğimize göre sırada bu sayfaları tek bir layout üzerinde gösterimini inceleyelim.

Web development ile ilgilenenler için bu kavram çok da yeni değil aslında. Farklı platformlarda farklı sayfalarda aynı layoutu kullanma konusunu MasterPage, SharedLayout isimleri ile gördük.

React dünyasında ise layout olarak konumlandırdığımız componenti React Router Dom kütüphanesinin componenti olan Route ile bu işi kolay bir şekilde hallediyoruz.

Layoutumuzu Oluşturalım

Öncelikle içerisinde header ve sidebar componentlerinin olduğu layoutumuzu oluşturalım. Bunun için src dizini altında layouts isimli bir klasör oluşturup içine PublicLayout.js isimli bir dosya oluşturup içini aşağıdaki gibi dolduralım

import React from 'react';
import Header from '../components/Header';
import { Link } from 'react-router-dom';

const PublicLayout = ({children}) => {
    return (
        <div className="public-layout">
            <Header />

            <div className="content-holder">
                <aside className="sidebar">
                    <ul>
                        <li><Link to="/">User List</Link> </li>
                    </ul>
                </aside>

                <aside className="content">
                    {children}
                </aside>
            </div>
        </div>
    );
}

export default PublicLayout;

Adım adım inceleyelim.

İlk olarak, fonksiyonun parametre olarak {children} aldığını görüyoruz. React componentleri default olarak props içinde children properytisi alır.

PublicLayout componentini içinde başka bir component olacak şekilde yani bu şekilde kullandığımda <PublicLayout> <UserList /> </PublicLayout>, UserList componenti PublicLayout componentinin bir childi olur ve child propu ile PublicLayout içine aktarılmış olur. Sonrasında ben tasarımıma uygun olarak bu componenti herhangi bir yerde kullanırım

İşte ben de fonksiyonun parametre kısmında children propunu direkt olarak desctruct edip aside içerisinde kullanmış oluyorum.

Bunun dışında PublicLayout içinde daha önceden hazılamış olduğumuz Header componenti de kullanmış olduk. Artık her sayfa için bu componenti tek tek import etmek yerine layoutumun içinde bir kere import ederek tüm sayfaların kullanımına hazır hale getirmiş oldum.

Header componenti ile ilgili ek bir konu var. Önceki kullanımlarımızda, component dışarıdan title propu alarak dinamik olarak başlığı değiştiriyordu. Şimdi layout içerisinde olduğu için direk title propunu göndermiyoruz. Bunun yerine ileride anlatacağımız global state mekanizmasını kullanarak title değiştirme işlemlerini gerçekleştireceğiz. Şimdilik boş kalacak 🙂

Yeni Bir Route Oluşturalım

Bir önceki dersimizde Route componentini aşağıdaki şekilde kullanıp React Router Dom kütüphanesine yönlendirme için kullancağımızı belirtmiştik.

<Route path="/" exact>
      <UserList />
</Route>

Buradaki kullanımda Route componenti direk kütüphaneden import edildiği halde kullanıyor.

Bundan sonra her sayfa için oluşturduğumuz layout kullanabilmemiz için Route componentini biraz değiştirip projemize özel bir hale getirmemiz gerekiyor.

Bunun için App.js içerisinde aşağıdaki gibi bir component oluşturalım.

const PublicRoute = ({ children, ...rest }) => {
  return (
    <Route
    {...rest}
    render={() =>
      (
        <PublicLayout>
          {children}
        </PublicLayout>
      ) 
    }
  />
  )
}

Burayı adım adım inceleyelim.

PublicRoute ismini verdiğimiz yeni bir functional component oluşturuyoruz. Bu component içerisinde React Router Dom kütüphanesinden import edilen Route componentinin render propunu kullanarak içine aldığı componenti PublicLayout içinde kullanıyoruz.

Bu sayede oluşturduğumuz yeni Routeu kullanan tüm sayfalar otomatik olarak layout kullanmış oluyor.

Şimdi de App.js içerisinde Router içerisinde kullandığımız iki Routeu PublicRoute ile değiştirelim. App.jsin son hali aşağıdaki gibi olacaktır.

import React from 'react';
import './app.scss';

import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";

import UserList from './pages/UserList';
import UserDetail from './pages/UserDetail';
import PublicLayout from './layouts/PublicLayout';


const PublicRoute = ({ children, ...rest }) => {
  return (
    <Route
    {...rest}
    render={() =>
      (
        <PublicLayout>
          {children}
        </PublicLayout>
      ) 
    }
  />
  )
}


function App() {

  return (
    <div className="App">
      <Router>
        <Switch>
          
          <PublicRoute path="/" exact>
            <UserList />
          </PublicRoute>

          <PublicRoute path="/user-detail/:name" exact>
            <UserDetail />
          </PublicRoute>

        </Switch>
      </Router>
    </div>
  );
}

export default App;

Not: Header componenti layout ile birlikte geleceği içib UserList ve UserDetail componentleri içerisinden silinebilir.

Tüm değişiklikleri yaptıktan sonra ekran çıktımız aşağıdaki gibi olacaktır.

Görsel Düzenlemeler

Çıktımızda ekranda yer alan tüm componentler alt alta görünüyor. Biraz css değişikliği ile Header componenti üstte, sidebar kısmı solda ve içerik kısmı sağda olacak şekilde düzenlemeler yapalım.

PublicLayout componentimizde content-holder isimli bir div içinde sidebar ve content isimli aside taglerini konumlandırmıştık. Aşağıdaki css düzenlemesi ile content-holder içinde yer alan bileşenleri yan yana dizip sidebar alanına %20, content alanına ise %80 bir genişlik verelim.

.content-holder{
    display: flex;

    .sidebar{
        flex: 2;
    }

    .content{
        flex: 8;
    }
}

Bu düzenleme ile birlikte ekran çıktımız aşağıdaki gibi olacaktır.

Bu işlem ile birlikte dersimizi sonlandırıyoruz. Derste yazdığımız kodların son haline buradan erişebilir, dilerseniz aşağıdan çalıştırılabilir haline gözlemleyebilirsiniz.

Bir sonraki dersimizde global state yönetimi konusunu ele aldık.

Sağlıkla kalın 🙂

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.