React Router Dom Outlet Adım Adım Örnek Uygulama

React router kullanımını pekiştirmek için adım adım bir uygulama geliştirdik. Uygulamamız anasafa (home) ve kullanıcılar (users) sayfasını içermektedir. Bu uygulamamızda iç içe route işlemini göstermek için kullanıcılar sayfası içerisinde istediğimiz bir kullanıcının bilgilerini gösteriyoruz. Bunun için useParams hooku ve Outlet komponentinin nasıl kullanıldığını da inceliyoruz.

React Router Outlet Nedir?

React router outlet, bir route elemanının alt elemanını göstermek için kullanılan bir komponenttir. Ne demek istiyoruz? Mesela users diye bir route oluşturduk ve burada tüm kullanıcıları listeliyoruz, bu route altında bir de seçilen kullanıcının özet bilgilerini görütülemek istiyoruz bunun için bir alt route (child route) oluşturduk, oluşturduğumuz bu route içeriğini users sayfası içerisinde göstermemiz gerekiyor. İşte bu durumda Outlet komponenti ile bu alt route içeriğinin gösterileceği yeri belirtiyoruz.

Şimdi daha iyi anlaşılması için bir uygulama yapalım. Uygulamamızda kullanıcılarımızı listelediğimiz bir sayfa oluşturalım ve listelenen kullanıcılardan herhangi birine tıklandığınd sayfanın en üstünde kullanıcı bilgileri görüntülensin.

React Route useParams Nedir?

Bir sayfaya gerekli bilgileri url içerisinden gönderdiğimizde bu bilgiye ulaşmamız için kullanıdığımız hook useParamsdır. Gerekli tanımlamalar Route bilgisi içerisinde yapılır ve değişkene bir ad verilir. Url içerisinde değişkena adı bulunmak zorunda değildir. useParams Route içerisindeki bilgiyi kullanarak gerekli değişken adını ve bilgisini alır. Mesela id olarak tanımlanmış bir bilgiyi almak için const { id } = useParams(); şeklinde bir kullanım yeterli olacaktır.

React Router Dom Outlet Adım Adım Uygulama

Uygulamamızı react-create-app ile oluşturacağız ve sonrasında react router dom kütüphanesini kuracağız. Önce uygulamamızı oluşturacağımız klasörü oluşturalım. Biz reoutlet adında bir klasör oluşuturduk ve bu klasör içerisinde

npx create-react-app .

diyerek uyulamamızın çatısının kurduk. Ardından

npm install react-router-dom@6

diyerek react-route-dom kütüphanesinin 6. sürümünü kuruyoruz. React router kurulduktan App.js dosyasının içeriğini aşağıdaki gibi düzenliyoruz.

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import Users from './pages/Users';
import User from './components/User';
import './App.css';
import Page404 from './pages/Page404';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='users' element={<Users />}>
            <Route path=':id' element={<User />} />
          </Route>
          <Route path='*' element={<Page404 />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

App.js dosyamız içerisinde App komponentini oluşturduk. Bu komponent içirisine sadece Route yapısını koyuyoruz. Burada dikkatinizi

    <Route path='users' element={<Users />}>
        <Route path=':id' element={<User />} />
    </Route>

bölümüne verin. Burada users sayfası için bir yol (path) belirtiyoruz ve hemen bu route tanımı içerisinde başka bir User sayfası için de bir route tanımlıyoruz, bu route ile Users sayfası içerisinde User komponentini çağıracağız. User komponentini çağırırken user id değerini kullanacağımızı path=’:id’ ifadesi ile belirtiyoruz. Daha sonra id değerine User komponenti içerisinde useParams hooku ile ulaşacağız.

Tüm kullanıcıların bilgilerini src/assets/data.js içerisinde bulunan users dizisinde tutuyoruz.

function Users() {
  return (
    <div>
        <Navbar />
        <h1>Users</h1>
        <hr />
            <Outlet />
        {
            users.map(user => <div key={user.id}><Link to={`${user.id}`} className='user-link'>{user.name}</Link></div>)
        }
    </div>
  );
}

Users sayfasını tanımlarken Outlet kullanımına dikkat edin. Users sayfasında listelenen bir kullanıcıya tıklandığında, aynı sayfa içerisinde o kullanıcıya ait bilgileri gösteriyoruz, bu görüntülenmenin olacağı yere Outlet komponentini koymamız yeterli başka bir şey yapmıyoruz. Bundan sonra User komponenti içerisinden gelecek bilgiler Outlet ile bildirdiğimiz yerde görüntülenecektir.

Şimdi User komponentine bakalım. User komponentinde kullanıcı bilgisini alarak geri döneceğiz. Kullanıcı ile ilgili bilgileri assets/data.js dosyasındaki users dizisinden alıyoruz. Bu dizi üzerindeki bir kullanıcıya ulaşmak için user id değerini kullanıyoruz. Bu id bize url yardımı ile geliyor. Urlden bu bilgiyi almak için useParams hookunu kullanıyoruz. Bu hook bize react router tarafından veriliyor. Bu sayfaya id değerinin geleceğini route tanımı yaparken App.js dosyası üzerinde yapmıştık.

const { id } = useParams()

Kullanıcı id bilgisini aldıktan sonra, artık kullanıcı bilgilerine ulaşmak ve onları sayfada göstermek oldukça kolay olacak. Şimdi User komponentini görelim.

function User() {
    const { id } = useParams();
    const user = users[id];
    return (
        <>
            {!user && <div>No selected user.</div>}
            {user &&
                <div className='user-box'>
                    <div>Name: {user.name}</div>
                    <div>Email: {user.email}</div>
                    <div>Gender: {user.gender}</div>
                    <div>Age: {user.age}</div>
                </div>
            }
            <hr />
        </>
    );
}

Users sayfanın yanında ayrıca Home sayfası tanımladık, yine bulunamayan sayfalar için Page404 sayfası oluşturduk. Bu sayfaların içeriklerini incelersiniz.

Artık npm start dediğimizde karşımıza yazdığımız uygulama sayfası çıkacaktır. Home ve Users sayfalarını göreceksiniz. Users sayfasına girdiğinizde, kullanıcı listesini göreceksiniz, kullanıcı listesinden herhangi bir kullanıcıya tıkladığınızda sayfa başlığının altında kullanıcı bilgileri görüntülenecektir.

React Router ve Outlet

React router ile iki sayfadan oluşan bir uygulama yaptık. Bu uygulama içerisinde Outlet komponentini kullanarak, users sayfasında, User komponentini nasıl göstereceğimizi gördük. Uygulamamızın dosyalarına Github üzerinden ulaşabilirsiniz. React Router Dom ile ilgili sayfamıza ulaşmak için tıklayınız.

Sonuç

React router dom, react ile uygulama geliştirildiğinde, uygulama içerisinde farklı sayfalar arasında dolaşmak için kullanabileceğimiz bir yönlendirme kütüphanesidir. Bu kütüphane ile uygulama içerisinde farklı adreslere sahip sayfalar oluşturmamız oldukça kolaydır. Bu yazımızda bu kütüphanenin nasıl kullanıldığını gösteren bir uygulama geliştirdik.

Sizin de ekleyeceğiniz bilgiler veya soracağınız sorular varsa yorumlarda bizimle paylaşabilirsiniz.