Yeni bir sıfırdan ileriye ReactJs serisine hoş geldiniz. En son React Router ile yönlendirme işlemlerini yapmıştık. Şimdi ise private route dediğimiz sadece özel anlarda yönlendirme işlemlerini yapacağız. Bunun için ise önce bir useContext hook öğrenmemiz gerecek. Bugün hem useContext hem de özel yönlendirmeleri göreceğiz. İyi okumalar.
useContext Nedir ?
useContext'i özellikle başka bir compenente bulunan verileri başka bir compenentte kullanmak için kullanırız. Mesela bir login sayfası düşünün kullanıcı siteye login oldu ve profilini görüntülemek istedi. Bu durumlarda useContext ile login olan kişinin verilerini tek bir state toplar ve ihtiyaç olduğunda başka bir compenente kullanabiliriz. İlk olarak butona basıldığında aktiflik durumunu gösterecek bir sistem yapalım. Bunun için önce ana sayfayı geçen konudan örnek olarak alacağım.
JavaScript:
import { useNavigate } from "react-router-dom";
function App() {
const navigate = useNavigate();
return (
<div>
<div>
<ul style={{ cursor: 'pointer' }}>
<li onClick={() => navigate("/")}>Ana Sayfa</li>
<li onClick={() => navigate("/urunler")}>Ürünüler</li>
<li onClick={() => navigate("/kariyer")}>Kariyer</li>
<li onClick={() => navigate("/hakkimizda")} >Hakkımızda</li>
<li onClick={() => navigate("/iletisim")}>İletişim</li>
<li onClick={() => navigate("/uyeBilgileri")}>uye bilgileri</li>
</ul>
<button onClick>Bana Tıkla üyelik durumu aktif olsun</button>
</div>
</div>
)
}
export default App;Ana sayfa bu durumda şimdi useContext için ayrı bir dosya açıp aşağıdaki kodları yazalım.
JavaScript:
import { createContext, useContext } from "react";
export const AktiflikContext = createContext();
function Context() {
const aktiflik = useContext(AktiflikContext);
return <div>{aktiflik ? "Aktif" : "Pasif"}</div>;
}
export default Context;
Burada AktiflikContext ile bir context oluşturuyoruz. daha sonra aktiflik değişkenine senin kullanacağın context az önce oluşturduğumzu AktiflikContext olacak diyip return olarak aktif-pasif olarak değerler döndürüyoruz. (True ise aktif false ise pasif):
Şimdi bu oluşturduğumuz sayfayı anasayfaya entegre edeceğiz.
JavaScript:
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import Router from "./Router/Router";
import { AktiflikContext } from "./Redux/Context";
function App() {
const navigate = useNavigate();
const [kullaniciDurum, setKullaniciDurum] = useState(false);
const aktiflik = () => {
setKullaniciDurum(prev => !prev);
console.log(!kullaniciDurum);
};
return (
<AktiflikContext.Provider value={kullaniciDurum}>
<div>
<ul style={{ cursor: "pointer" }}>
<li onClick={() => navigate("/")}>Ana Sayfa</li>
<li onClick={() => navigate("/urunler")}>Ürünler</li>
<li onClick={() => navigate("/kariyer")}>Kariyer</li>
<li onClick={() => navigate("/hakkimizda")}>Hakkımızda</li>
<li onClick={() => navigate("/iletisim")}>İletişim</li>
<li onClick={() => navigate("/uyeBilgileri")}>Üye Bilgileri</li>
</ul>
<button onClick={aktiflik}>Bana Tıkla üyelik durumu değişsin</button>
<Router />
</div>
</AktiflikContext.Provider>
);
}
export default App;
Burada kullanıcıDurum diye bir state oluşturduk ve ilk değeri false ama aktiflik fonksiyonu ile bir etkileşime geçince değerini tam tersi yap diyoruz. (ilk etkileşimde değer true olacak ikinci etkileşimde false böyle gidecek.)
Daha sonra <AktiflikContext.Provider value={kullaniciDurum}> ile bir provider oluşturup kullanıcıDurum değerini geçiyoruz. Böylece bunu kullanabileceğiz.
En son olarak da butona fonksiyonu ekliyoruz ve butona her bastıkça true-false değerleri de konsolda görünmeye başlıyor.
Şimdi bir yeni sayfa oluşturuyorum bu kullanıcı aktif olduktan sonra görebileceği üyelik sayfası olacak.
JavaScript:
import React from 'react'
function UyelikSayfa() {
return (
<div>
<p>Hesabınza Hoş Geldiniz DarkS0LDIER</p>
</div>
)
}
export default UyelikSayfaÇok bir şey yapmaya gerek bu sayfaya şimdilik. Şimdi router işlemlerini yapacağız. Direkt bir önceki konudaki gibi yönlendirme yapamayız çünkü herkese açık sayfa olur bu yüzden private router adlı yöntemle ilerleyeceğiz.
Yeni bir router sayfası açıp şu kodları yazıyoruz.
JavaScript:
import { Navigate } from "react-router-dom";
import { useContext } from "react";
import { AktiflikContext } from "../Redux/Context";
function PrivateRoute({ children }) {
const kullaniciDurum = useContext(AktiflikContext);
return kullaniciDurum ? children : <Navigate to="/uyeBilgileri" /> ? alert("Üye Olmadan Bu Sayfaya Giremezsiniz") : null;
}
export default PrivateRoute;
Burada Context içeriğini children props olarak geçtim ve eğer bu children true ise üyelik sayfasına erişebilme yetkisi verdim. Eğer kullanıcı aktif olmadan girmeye kalkarsa bir alert ile uyaralım onu.
Şimdi router sayfasını bu özel yönlendiriciyi de ekleyelim.
JavaScript:
import React from 'react'
import { Routes, Route } from 'react-router-dom';
import AnaSayfa from '../AnaSayfa';
import Hakkimizda from '../Hakkimizda';
import Iletisim from '../Iletisim';
import Kariyer from '../Kariyer';
import Kitap from '../Kitap';
import Kalem from '../Kalem';
import Bulunamadi from '../Bulunamadi';
import Urunler from '../Urunler';
import PrivateRouter from './PrivateRouter';
import UyelikSayfa from '../UyelıkSayfa';
function Router() {
return (
<Routes>
<Route path="/" element={<AnaSayfa />} />
<Route path="hakkimizda" element={<Hakkimizda />} />
<Route path="iletisim" element={<Iletisim />} />
<Route path="kariyer" element={<Kariyer />} />
<Route path="urunler" element={<Urunler />}>
<Route path="kalem" element={<Kalem />} />
<Route path="kitap" element={<Kitap />} />
</Route>
<Route
path="uyeBilgileri"
element={
<PrivateRouter>
<UyelikSayfa />
</PrivateRouter>
}
/>
<Route path="*" element={<Bulunamadi />} />
</Routes>
)
}
export default Router
Burada klasik bir route işlemi yapar gibi bir url değeri ve eleman değeri verdik. Eleman verirken direkt compenenti import ediyorduk normalde bu sefer ise oluşturduğumuz PrivateRouter ile sarmalayarak yaptık. Böylece kullanıcı sadece aktif olduğunda bu sayfayı görebilecek.
Eğer dilerseniz alert işleminden sonra useNavigate kullanarak kullanıcıyı ana sayfaya atabilirsiniz bu şekilde daha gerçekçi bir örnek yapmış olursunuz. Size kalmış useNavigate pekiştirmek için güzel bir yöntem olabilir.
Bu sayede özel yönlendirme işlemlerini useContext ve Private Router kullanarak yapabilirsiniz. Bir sonraki konuda ise useParams hookunu göreceğiz bu hook da yine router ile alakalı o yüzden yönlendirme işlemlerinin son konusu useParams hook'u hakkında olacaktır. O zamana kadar görüşmek üzere.
