React Router V6 Nasıl Kullanılır: Yeni Başlayanlar İçin Kılavuz

React Router, React uygulamalarında yönlendirmeyi uygulamak için kullanabileceğiniz en popüler kütüphanedir. Sayfada gezinme, sorgu parametreleri ve çok daha fazlasını içeren çeşitli yönlendirme görevlerinin yerine getirilmesine yönelik bileşen tabanlı bir yaklaşım sağlar.

React Router V6, önceki sürümünde mevcut olan tuzakları ele almak ve gelişmiş bir yönlendirme çözümü sağlamak için yönlendirme algoritmasında bazı önemli değişiklikler sunar.

React Router V6 Kullanarak Yönlendirmeye Başlarken

Başlamak, React uygulaması oluştur. Alternatif olarak, Vite kullanarak bir React projesi kurmak. Projeyi oluşturduktan sonra devam edin ve yükleyin. tepki-yönlendirici-dom paket.

npm install react-router-dom

React Router Kullanarak Rota Oluşturma

Rotalar oluşturmak için uygulamanın tamamını bir TarayıcıYönlendirici bileşen. Kodunuzdaki kodu güncelleyin index.jsx veya main.jsx aşağıdaki gibi dosya:

import React from'react'
import





instagram viewer
 ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { BrowserRouter as Router } from'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(



 </Router>
 </React.StrictMode>,
)

Uygulama bileşenini TarayıcıRouter bileşeniyle sarmak, uygulamanın tamamının yönlendirme bağlamına ve React Router kitaplığı tarafından sunulan özelliklere erişmesini sağlar.

Rotalar Bileşenini Kullanma

Uygulamayı TarayıcıRouter bileşeniyle sardıktan sonra rotalarınızı tanımlayabilirsiniz.

Rotalar bileşen bir iyileştirmedir Anahtar Daha önce React Router v5 tarafından kullanılan bileşen. Bu bileşen göreceli yönlendirmeyi, otomatik rota sıralamasını ve iç içe rotalarla çalışma yeteneğini destekler.

Genellikle uygulamanızın en üst düzeyine, genellikle Uygulama bileşeninin içine rotalar eklersiniz. Ancak projenizin yapısına bağlı olarak bunları başka herhangi bir yerde tanımlayabilirsiniz.

Aç Uygulama.jsx dosyalayın ve standart React kodunu aşağıdakiyle değiştirin:

import'./App.css'
import { Routes, Route } from'react-router-dom';
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
functionApp() {
return (
 <>

"/" element={} />
"/about" element={} />
 </Routes>
 </>
 )
}
exportdefault App

Bu yönlendirme yapılandırması, belirli URL yollarını karşılık gelen sayfa bileşenleriyle (Kontrol Paneli) eşler. ve Hakkında), bir kullanıcı belirli bir yeri ziyaret ettiğinde uygulamanın uygun bileşeni oluşturmasını sağlamak URL'si.

dikkat edin eleman prop, Route bileşeni içinde, yalnızca bileşenin adının yerine işlevsel bir bileşeni aktarmanıza olanak tanır. Bu, rotaların ve bunlarla ilgili bileşenlerin aşağı doğru aktarılmasını mümkün kılar.

İçinde kaynak dizin, yeni bir tane oluştur sayfalar dizini açın ve iki yeni dosya ekleyin: Dashboard.jsx Ve Hakkında.jsx. Devam edin ve rotaları test etmek için bu dosyalar içindeki işlevsel bileşenleri tanımlayın.

Rotaları Tanımlamak için createBrowserRouter'ı Kullanma

React Router'ın belgeleri kullanılmasını önerir tarayıcıYönlendirici oluştur React web uygulamaları için yönlendirme yapılandırmasını tanımlayan bileşen. Bu bileşen, hafif bir alternatiftir TarayıcıYönlendirici argüman olarak bir dizi rotayı alır.

Bu bileşeni kullandığınızda rotalarınızı Uygulama bileşeni içinde tanımlamanıza gerek kalmaz. Bunun yerine, tüm Rota yapılandırmalarınızı ana hatlarıyla belirtebilirsiniz. index.jsx veya main.jsx dosya.

Bu bileşeni nasıl kullanabileceğinize dair bir örnek:

import React from'react'
import ReactDOM from'react-dom/client'
import { createBrowserRouter, RouterProvider } from"react-router-dom";
import App from'./App.jsx'
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
const router = createBrowserRouter([
 {
 path: "/",
 element: <App />,
 },
 {
 path: "/dashboard",
 element: <Dashboard />,
 },
 {
 path: "/about",
 element: <About />,
 },
]);
ReactDOM.createRoot(document.getElementById("root")).render(


 </React.StrictMode>
);

Yönlendirme yapılandırması şunları kullanır: tarayıcıYönlendirici oluştur Ve YönlendiriciSağlayıcı React uygulaması için bir yönlendirme sistemi oluşturmak için bileşenler.

Ancak bu uygulamanın tek farkı, uygulamayı TarayıcıRouter bileşenini kullanarak sarmak yerine, YönlendiriciSağlayıcı geçmek için bileşen Yönlendirici uygulamadaki tüm bileşenlerin bağlamı.

Sayfa Bulunamayan Rotaları Uygulama

yol Route bileşenindeki prop, gerekli bileşeni oluşturmadan önce bir eşleşme olup olmadığını belirlemek için sağlanan yolu geçerli URL ile karşılaştırır.

Hiçbir rotanın eşleşmediği durumları ele almak için, yönetecek belirli bir rota oluşturabilirsiniz. 404 sayfa bulunamadı hatası. Bu rotanın dahil edilmesi, kullanıcıların var olmayan bir URL'ye eriştikleri durumlarda anlamlı yanıtlar alabilmelerini sağlar.

Bir 404 rotası uygulamak için bu rotayı Rotalar bileşenine ekleyin:

// using the Route component
"*" element={} /> 
// using createBrowserRouter
{ path: "*", element: <NotFound />, },

Daha sonra özel bir tane oluşturun Bulunamadı.jsx bileşen ve son olarak, CSS modüllerini kullanarak bileşene stil verme.

Yıldız işareti (*), belirtilen rotalardan hiçbirinin geçerli URL ile eşleşmediği senaryoları işleyen bir joker karakterdir.

useNavigate Kancasını Kullanarak Programlı Gezinme

kullanınNavigasyon hook uygulamalarda gezinmeyi işlemek için programlı bir yol sağlar. Bu kanca, düğme tıklamaları veya form gönderimleri gibi kullanıcı etkileşimlerine veya olaylara yanıt olarak gezinmeyi tetiklemek istediğinizde özellikle kullanışlıdır.

Gelin, nasıl kullanılacağına bir göz atalım kullanınNavigasyon programlı gezinme için kanca. oluşturduğunuzu varsayarsak Hakkında.jsx işlevsel bileşen, kancayı React Router paketinden içe aktarın:

import { useNavigate } from'react-router-dom';

Ardından, tıklandığında belirli bir rotaya doğru navigasyonu tetikleyen bir düğme ekleyin.

functionAbout() {
const navigate = useNavigate();
const handleButtonClick = () => {
 navigate("/");
 };
return (
 <>
// Rest of the code ...

 </>
 );
}
exportdefault About;

React Router v6'da tanıtılan useNavigate kancası ve useNavigation kancasının, yakından ilişkili adlarına rağmen farklı amaçlara hizmet ettiğini belirtmekte fayda var.

UseNavigation kancası, devam eden navigasyon durumu ve diğer özellikler gibi navigasyonla ilgili ayrıntılara erişmenizi sağlar. Bu, devam eden işlemler hakkında görsel geri bildirim sağlamak için döndürücülerin yüklenmesi gibi kullanıcı arayüzü öğelerini oluşturmak istediğinizde kullanışlıdır.

Burada useNavigation kancasını nasıl kullanabileceğinizi gösteren bir örnek verilmiştir.

import { useNavigation } from"react-router-dom";
functionSubmitButton() {
const navigation = useNavigation();
const buttonText =
 navigation.state "submitting"
? "Saving..."
: navigation.state "loading"
? "Saved!"
: "Go";
return<buttontype="submit">{buttonText}button>;
}

Bu örnekte, Gönder Düğmesi bileşen, useNavigation kancasından elde edilen gezinme durumuna göre metnini dinamik olarak güncelleyecektir.

Bu kancaların farklı rolleri olsa da bunları bir arada kullanabilirsiniz. Gezinme işlemini başlatmak için useNavigate kancasını kullanın ve gerçek zamanlı gezinme ayrıntılarını almak için Gezinme kancasını kullanın; bu, daha sonra tarayıcıda oluşturulacak geri bildirim kullanıcı arayüzünün türünü yönlendirir.

useRoutes Kancasını kullanma

Bu kanca, rota yollarını bir nesne içindeki ilgili bileşenlerle birlikte tanımlamanıza olanak tanır. Daha sonra kanca, rotaları eşleştirmek ve ilgili bileşenleri görüntülemek için kullanılır.

Kancanın nasıl kullanılacağına dair basit bir örnek:

import { useRoutes } from'react-router-dom';
import Dashboard from'./Dashboard';
import About from'./About';
const routes = [
 {
 path: '/',
 element: <Dashboard/>,
 },
 {
 path: '/about',
 element: <About />,
 },
];
functionApp() {
const routeResult = useRoutes(routes);
return routeResult;
}
exportdefault App;

Bu örnekte, rotalar nesne, URL yollarının bileşenlere eşlenmesini tanımlar. Uygulama bileşen daha sonra bu kancayı geçerli URL'yi eşleştirmek ve eşleşen rotaya göre uygun bileşeni oluşturmak için kullanır.

Bu kancayı kullanmak, yönlendirme mantığınız üzerinde ayrıntılı kontrol sağlar ve uygulamanız için kolayca özel rota işleme mantığı oluşturmanıza olanak tanır.

React Uygulamalarında Yönlendirmeyi Yönetme

React'ın kendisi yönlendirme görevlerini yönetmek için önceden oluşturulmuş bir mekanizma içermese de React Router bu boşluğu doldurur. Etkileşimli, kullanıcı dostu uygulamalar oluşturmak için kolayca kullanabileceğiniz çeşitli yönlendirme bileşenleri ve yardımcı program işlevleri sağlar.