Tek Sayfa Uygulaması (SPA), mevcut bir web sayfasını web sunucusundan yeni bilgilerle dinamik olarak yeniden yazan bir web sitesi veya web uygulamasıdır.
Bir React uygulamasında, bileşenler site içeriğini alır ve projenizdeki tek bir HTML dosyasına dönüştürür.
React Router, seçtiğiniz bileşene gitmenize yardımcı olur ve onu HTML dosyasında işler. Kullanmak için, React Router'ı nasıl kuracağınızı ve React uygulamanızla entegre edeceğinizi bilmeniz gerekir.
React Router Nasıl Kurulur?
kullanarak React Router'ı React projenize kurmak için npm, JavaScript paket yöneticisi, proje dizininizde aşağıdaki komutu çalıştırın:
npm i tepki-yönlendirici-dom
Alternatif olarak, kütüphane paketlerini çevrimdışı kurmanıza izin veren bir paket yöneticisi olan Yarn'ı kullanarak paketi indirebilirsiniz.
Yarn kullanarak React Router'ı kurmak için şu komutu çalıştırın:
yarn tepki-yönlendirici-dom@6 ekleyin
React Router'ı Kurma
React Router'ı yapılandırmak ve uygulamanızda kullanıma sunmak için, içe aktarın TarayıcıYönlendirici itibaren tepki-yönlendirici-dom senin içinde index.js dosya, ardından uygulama bileşeninizi içine sarın TarayıcıYönlendirici öğe:
içe aktarmak Tepki itibaren'tepki';
içe aktarmak ReactDOM itibaren"react-dom/client";
içe aktarmak Uygulama itibaren'./Uygulama';
içe aktarmak { TarayıcıYönlendirici } itibaren'tepki-yönlendirici-dom';sabit kök = ReactDOM.createRoot( belge.getElementById('kök') );
root.render(
</BrowserRouter>
);
Uygulama bileşenini TarayıcıYönlendirici öğesi, tüm uygulamaya Yönlendiricinin yeteneklerine tam erişim sağlar.
Diğer Bileşenlere Yönlendirme
Yönlendiricinizi uygulamanızda ayarladıktan sonra, devam etmeli ve uygulama bileşenlerinizi oluşturmalı, yönlendirmeli ve oluşturmalısınız. Aşağıdaki kod, "Ana Sayfa", "Hakkında" ve "Blog" adlı bileşenleri içe aktarır ve oluşturur. Ayrıca ithal eder Rota Ve Rotalar gelen elementler tepki-yönlendirici-dom.
Rotalarınızı içinde tanımlayacaksınız. Uygulama bileşen:
içe aktarmak { Rotalar, Rota } itibaren'tepki-yönlendirici-dom';
içe aktarmak Ev itibaren'./Ev';
içe aktarmak Hakkında itibaren'./Hakkında';
içe aktarmak Blog itibaren'./Blog';işlevUygulama() {
geri dönmek (
'/' eleman={ } />
'/hakkında' eleman={ } />
'/Blog' eleman={ }/>
</Routes>
)
}
ihracatvarsayılan Uygulama;
bu Uygulama component, diğer bileşenlerinizde yazdığınız tüm kodları işleyen ana bileşendir.
bu Rotalar element, uygulama bileşeninizde oluşturduğunuz ayrı rotaları saran üst öğedir. bu Rota öğesi tek bir rota oluşturur. İki prop niteliği alır: a yol ve bir eleman.
bu yol öznitelik amaçlanan bileşenin URL yolunu tanımlar. Yukarıdaki kod bloğundaki ilk Rota, yolu olarak bir ters eğik çizgi (/) kullanır. Bu, React'in ilk olarak oluşturacağı özel bir yoldur, bu nedenle Ev bileşen, uygulamanızı çalıştırdığınızda işler. bu sistemi karıştırmayın React Bileşenlerinizde koşullu oluşturmayı uygulama. bunu verebilirsin yol istediğiniz herhangi bir adı atfedin.
bu eleman öznitelik, bileşenin tanımladığı bileşeni tanımlar. Rota render edecek.
bu bağlantı component, farklı rotalarda gezinmek için kullanılan bir React Router bileşenidir. Bu bileşenler, oluşturduğunuz çeşitli yollara erişir.
Örneğin:
içe aktarmak { Bağlantı } itibaren'tepki-yönlendirici-dom';işlevEv() {
geri dönmek (
'/hakkında'>Sayfa hakkında</Link>
'/Blog'>Blog sayfası</Link>Bu ana sayfadır
</div>
)
}
ihracatvarsayılan Ev;
bu bağlantı bileşen, HTML bağlantı etiketiyle neredeyse aynı, sadece "href" yerine "to" adlı bir öznitelik kullanır. bu bağlantı bileşen, özniteliği olarak karşılık gelen yol adıyla Rotaya gider ve Rotanın bileşenini oluşturur.
İç İçe Yönlendirme ve Nasıl Uygulanır?
React Router, birden fazla Rotayı tek bir Rotaya sarmanıza olanak tanıyan iç içe yönlendirmeyi destekler. Bu, esas olarak, Yolların URL yollarında bazı benzerlikler olduğunda kullanılır.
Yönlendirmek istediğiniz bileşenleri oluşturduktan sonra, her biri için ayrı Yönlendirmeler geliştireceksiniz. uygulama bileşen.
Örneğin:
içe aktarmak { Rotalar, Rota } itibaren'tepki-yönlendirici-dom';
içe aktarmak Nesne itibaren'./Nesne';
içe aktarmak Yeni makale itibaren'./Yeni makale';
içe aktarmak MakaleBir itibaren'./ArticleOne';işlevUygulama() {
geri dönmek ('/madde' eleman={ }/> '/makale/yeni' eleman={ }/> '/makale/1' eleman={ }/>
</Routes>
)
}
ihracatvarsayılan Uygulama;
Yukarıdaki kod bloğu, oluşturulan bileşenleri içe aktarır ve yönlendirir Nesne, Yeni makale, Ve MakaleBir. Üç yol arasındaki URL yollarında bazı benzerlikler vardır.
bu Yeni makale Rotanın yol adı şu şekilde başlar: Nesne Eklenmiş bir ters eğik çizgi (/) ve "yeni" sözcüğü, yani (/yeni) ile birlikte rotanın yol adı. yol adları arasındaki tek fark, Nesne Rota ve MakaleBir Rota, satırın sonundaki eğik çizgidir (/1). MakaleBir bileşenin yol adı.
Üç Rotayı mevcut durumlarında bırakmak yerine iç içe yerleştirebilirsiniz.
Şöyle:
içe aktarmak { Rotalar, Rota } itibaren'tepki-yönlendirici-dom';
içe aktarmak Nesne itibaren'./Nesne';
içe aktarmak Yeni makale itibaren'./Yeni makale';
içe aktarmak MakaleBir itibaren'./ArticleOne';işlevUygulama() {
geri dönmek ('/madde'>
}/>'/makale/yeni' eleman={ }/> '/makale/1' eleman={ }/>
</Route>
</Routes>
)
}
ihracatvarsayılan Uygulama;
Üç ayrı Rotayı tek bir Rotaya sardınız Rota eleman. Ebeveynin Rota öğenin yalnızca yol öznitelik ve hayır eleman oluşturulacak bileşeni tanımlayan öznitelik. bu dizin ilk çocuktaki özellik Rota eleman bunun olduğunu belirtir Rota ebeveynin URL yoluna gittiğinizde işler Rota.
Kodunuzu daha iyi ve bakımı daha kolay hale getirmek için Rotalarınızı bir bileşende tanımlamalı ve onu bileşene aktarmalısınız. uygulama kullanım için bileşen.
Örneğin:
içe aktarmak { Rotalar, Rota } itibaren'tepki-yönlendirici-dom';
içe aktarmak Nesne itibaren'./Nesne';
içe aktarmak Yeni makale itibaren'./Yeni makale';
içe aktarmak MakaleBir itibaren'./ArticleOne';işlevMakaleRotalar() {
geri dönmek (
}/>'/makale/yeni' eleman={ }/> '/makale/1' eleman={ }/>
</Routes>
)
}
ihracatvarsayılan MakaleRotaları;
Yukarıdaki kod bloğundaki bileşen, daha önce uygulama bileşeninde bulunan iç içe geçmiş Yolları içerir. Bileşeni oluşturduktan sonra onu içe aktarmanız gerekir. uygulama bileşen ve tek bir kullanarak yönlendirin Rota eleman.
Örneğin:
içe aktarmak { Rotalar, Rota } itibaren'tepki-yönlendirici-dom';
içe aktarmak MakaleRotalar itibaren'./ArticleRoutes';işlevUygulama() {
geri dönmek ('/madde/*' eleman={ }>
</Routes>
)
}
ihracatvarsayılan Uygulama;
Finalde Rota bileşeni, Rotanın yol adının sonuna eklenen ters eğik çizgi ve yıldız simgeleri, yol adının şununla başlayan herhangi bir yol adına karşılık gelmesini sağlar: (/madde).
Yönlendiriciye Tepki Verecek Daha Fazlası Var
Artık React Router kullanarak React.js'de tek sayfalık uygulamaların nasıl oluşturulacağına dair temel bilgilere aşina olmalısınız.
React Router kitaplığında, web uygulamaları oluştururken geliştirici deneyimini daha dinamik hale getiren daha birçok özellik mevcuttur.
