TanStack Router ile Vite Projenizde Kimlik Doğrulama ve Aktif Rota Yönetimi

TanStack Router ile Vite Projenizde Kimlik Doğrulama ve Aktif Rota Yönetimi

Merhaba! Bu makalede, Vite ile geliştirdiğiniz projelerde TanStack Router kütüphanesini nasıl kullanacağınızı, kimlik doğrulama gerektiren rotaları nasıl yöneteceğinizi ve aktif rotaları nasıl belirleyeceğinizi adım adım anlatacağım. TanStack Router, React uygulamalarınız için güçlü ve esnek bir yönlendirme çözümü sunar. Bu rehber, hem yeni başlayanlar hem de deneyimli geliştiriciler için faydalı olacaktır. İşte başlayalım!

Proje Kurulumu

Öncelikle, bir Vite projesi oluşturmanız gerekiyor. Bunun için aşağıdaki komutu kullanabilirsiniz:

npm create vite@latest my-project --template react

Projenizi oluşturduktan sonra, TanStack Router’ı kurmanız gerekiyor. Bunun için aşağıdaki komutu kullanın:

npm install @tanstack/react-router-dom

Kurulum tamamlandıktan sonra, projenizin `App.jsx` veya ana bileşeninizde TanStack Router’ı import edip kullanmaya başlayabilirsiniz. Başlangıçta basit bir yapı oluşturabilirsiniz. Örneğin, ana sayfanız ve bir hakkımızda sayfanız olsun.

Kimlik Doğrulama Gerektiren Rotalar

Kimlik doğrulama gerektiren rotaları yönetmek için, rotalarınızı korumak üzere bir bileşen veya fonksiyon kullanabilirsiniz. Bu bileşen, kullanıcının oturum açıp açmadığını kontrol eder ve yetkisi yoksa giriş sayfasına yönlendirir. Aşağıdaki örnekte, `ProtectedRoute` bileşenini kullanarak bunu göstereceğim:

“`javascript
import { Navigate } from ‘@tanstack/react-router-dom’;

const ProtectedRoute = ({ children }) => {
const isAuthenticated = localStorage.getItem(‘isAuthenticated’) === ‘true’; // basit bir örnek

if (!isAuthenticated) {
return ;
}

return children;
};
“`

Bu fonksiyon, yerel depolamada (localStorage) ‘isAuthenticated’ anahtarının değerini kontrol eder. Eğer ‘true’ değilse, kullanıcıyı ‘/login’ rotasına yönlendirir. Bu `ProtectedRoute` bileşenini rotalarınızda kullanarak koruyabilirsiniz.

Aktif Rotaları Belirleme

TanStack Router, aktif rotaları belirlemek için `useMatch` hook’unu sunar. Bu hook, belirli bir rotayla eşleşip eşleşmediğini kontrol eder ve bu bilgiyi UI’nızı güncellemek için kullanabilirsiniz.

“`javascript
import { useMatch } from ‘@tanstack/react-router-dom’;

const MyComponent = () => {
const match = useMatch(‘/about’);

return (

);
};
“`

Bu örnekte, `/about` rotasında bulunup bulunmadığını kontrol eder ve buna göre bir mesaj gösterir. `useMatch` hook’u, aktif rota bilgilerini dinamik olarak görüntülemek için oldukça kullanışlıdır.

Gelişmiş Teknikler

Daha gelişmiş senaryolar için, TanStack Router’ın sunduğu diğer hook’ları ve özelliklerinden yararlanabilirsiniz. Örneğin, `useLocation`, `useNavigate`, `useParams` gibi hook’lar uygulamanızda daha karmaşık yönlendirme senaryolarını yönetmenize yardımcı olur. TanStack Router dokümanlarını inceleyerek daha fazla bilgi edinebilirsiniz.

Bu makalede, Vite projenizde TanStack Router’ı kullanmanın temel prensiplerini ele aldık. Umarım bu bilgiler size yardımcı olmuştur. Daha fazla bilgi ve örnek için web sitemi ziyaret edebilirsiniz.

Başka sorularınız olursa, lütfen yorum yapmaktan çekinmeyin.

#Etiketler
TanStack Router, Vite, React, Rota Yönetimi, Kimlik Doğrulama, Aktif Rotalar, React Router, Web Geliştirme, JavaScript, useMatch, useNavigate, useParams, useLocation, ProtectedRoute