React'te Birden Çok Sayfa Nasıl Eklenir (2022 Eğitimi)

Bu yazıda, React'te çok sayfalı bir web sitesi (veya uygulama) yapmayı tartışacağız. Bu nispeten basit bir kavramdır ve yaklaşık beş dakika içinde yapılabilir. Nasıl yapılacağını anladıktan sonra, projelerinize sürekli olarak kolaylıkla sayfa ekleyebileceksiniz.

Yakın zamanda piyasaya sürülen ve beşinci sürümden bazı kırılma değişiklikleri içeren React Router V6'yı kullanacağız. V5 kullanan diğer öğreticiler çalışmayacak ve eski.

React'te kodlanmış birden fazla sayfaya sahip bir uygulama veya web sitesine sahip olmak, kullanıcı deneyimi için önemlidir. Twitter Lite veya Facebook gibi herhangi bir popüler tepki uygulamasına bir göz atın… Kullanıcıların günlük olarak eriştiği birçok sayfa koleksiyonu olduğunu fark edeceksiniz.

React'te birden çok sayfa eklemek için kullanabileceğiniz bir dizi yöntem vardır, ancak öncelikle bunun yerel kitaplıkta yerleşik bir şey olmadığını anlamalısınız. Bunun yerine, birden çok sayfa oluşturma hedefini gerçekleştirmek için amaca yönelik oluşturulmuş bir paket kullanmamız gerekecek.

Tek bir React uygulamasında birden fazla sayfaya sahip olmanın kullanım durumları oldukça basittir. Bir web sitesi oluşturabilir ve farklı sayfalardaki farklı içerik türlerini kolayca sınıflandırabilirsiniz.

Ancak, React'in varsayılan uygulamasının tek bir HTML dosyası kullanmak üzere yapıldığı da anlaşılmalıdır ve bu tasarım gereğidir. Bu tek HTML dosyasına dinamik olarak eklenen React kullanıcı bileşenleri.

React'te Birden Çok Sayfa

Daha önce de belirtildiği gibi, React'te birden çok sayfa eklemenin birçok farklı yolu vardır. Bu görevi yerine getirmek için yükleyebileceğiniz birkaç pakete göz atalım.

• https://reactrouter.com/
• https://reactnavigation.org/
• https://github.com/molefrog/wouter

Artık React'te sayfaları uygulayabileceğimiz çeşitli yolları anladığımıza göre, bunu yapmanın en popüler ve basit yoluna bir göz atalım.

React Router'ı Kullanma

React Router, tepki ile yönlendirme için fiili standart kitaplıktır. Kurulduktan sonra, değişen URL yollarıyla senkronize edilmiş, tepki içindeki birden çok bileşen arasında gezinebileceksiniz. Ayrıca HTML5 geçmiş API'si ile çalışarak her şeyi senkronize halde tutar ve tarayıcıda ileri/geri oklarını kullanmanıza olanak tanır.

Bu eğitim için, bir React uygulaması oluşturduğunuzu ve aralarında gezinmek istediğiniz birden fazla bileşene sahip olduğunuzu varsayacağız.

React Router, dosyalar arasında gezinirken oluşan beyaz flaşı ortadan kaldırmak ve işlerin hızla değişmesini sağlarken, kullanıcının Geçmiş API'sini kullanarak hala ileri ve geri gitmesine izin vermek için iyidir.

Dikkat, bu basit bir örnektir . Aynı zamanda, SEO için iyi olmayan, hala müşteri tarafı oluşturma. "Gerçek" bir web sitesi yapmaya çalışıyorsanız, NextJS veya Gatsby'ye bakın.

1. React Router Ekleyin

npm install tepki-yönlendirici-dom

Bu, bireysel sayfalar için dinamik bir yönlendirme uygulamak, URL'leri senkronize etmek ve geçmiş API'sine erişmek için gerekli olan react-router-dom paketini uygulamanıza yükleyecektir.

2. Sayfalarınızı Oluşturun

Bu örnekte ana sayfa, iletişim ve blog sayfası aynı genel yapıyı takip etmektedir:

import React from 'tepki'; function Ana Sayfa() {     dönüş (         <h1>bu   ana sayfa</h1>     ); } dışa aktarma varsayılan Ana Sayfa;

NoPage de aynıdır, ancak 404 hata sayfası olarak tasarlanmıştır.

4. adımda "layout.jsx"e geri döneceğiz.

3. Navbar'ı Yapın

Artık sayfaların yapısını anladığımıza göre, her biri arasında geçiş yapmak için bir gezinme çubuğu yapalım. Gelecekte düzenlemesi kolay olduğu için ayrı bir gezinme çubuğu bileşeni oluşturmanızı öneririz. Diğer bazı öğreticiler, Nav'yi layout.jsx dosyasına yerleştirir, bu da iyidir.

navbar.jsx şöyle görünür:

import React from "tepki"; import { BrowserRouter, Route, Link }   react-router-dom"; function Navbar() {   dönüş (     <nav>       <ul>      ;    <li>          <Bağlantı "/">Ana Sayfa</Bağlantı&gt ;         </li>         <li>            <Bağlantı to="/blogs">Bloglar</Bağlantı>        </li&gt ;         <li>           <Bağlantı to="/ iletişim>>İletişim</Link>         </li>       </ul>          &nbsp ;  </nav>   ); } dışa aktarma varsayılan Gezinme çubuğu;

<link/> öğesi, HTML'deki <a href=> ile aynıdır.

4. Layout.jsx ile Her Şeyi Bir Araya Getirin

Şimdi sayfa içeriğini (ana sayfa olarak düşünün) ve her sayfa arasındaki gezinmeyi birbirine bağlayacağız.

İşte o dosyanın nasıl göründüğü:

import React from "tepki"; import {Outlet} from "react-router-dom";  Gezinme çubuğunu  "../Navbar"; const Yerleşim = () => {   dönüş (     <>      < Gezinme çubuğu />      <Çıkış />     </>   ); }; dışa aktarma varsayılan Düzen;

<Outlet/> öğesi, 5. adımda yönlendirilen bileşeni püskürtür.

5. Rotalar Oluşturun

index.js dosyamızda gerçek yönlendirmeyi oluşturacağız.

 ReactDOM 'dan "react-dom"; import { BrowserRouter, Routes, Route } from "react-router-dom";  Düzen içinden "./pages/Layout"; içe aktarın içe Ana  "./pages/Ana";  Blogları  "./pages/Blogs"; İthalat İletişim  "./pages/Contact";  NoPage from "./pages/NoPage"; dışa aktarma varsayılan işlev App() {   dönüş (     <TarayıcıYönlendirici>      <Rotalar>    ;      <Rota yol="/" element={<Düzen />}>                    ;    <Rota index öğe={<Ana Sayfa />} />                                 &nbsp ;<Rota yol="bloglar" element={<Bloglar />} />          &lt ;Rota yol="iletişim" element={<İletişim />} />          <Rota&nbsp ;path="*" element={<NoPage />} />         </Rota>  &nbsp ;    </Rotalar>      </BrowserRouter>  nbsp;); } ReactDOM.render(<App />, document.getElementById("root"));

Bu, her bileşen veya sayfa arasında yönlendirme yaptığımız gerçek yoldur. Burada yapı önemlidir: varsayılan olarak, sırayla içindeki sayfaların çıktısını veren Düzen şablonunu oluşturacağız. <Route index element={<Home />} /> , İndeks rotasını ayarlayarak, çıplak etki alanı Ana Sayfa şablonunu yükleyecektir.

Bu rotalar, url /blog olduğunda blog sayfasını ve url /contact olduğunda iletişim sayfasını gösterir. Gerektiği kadar çok sayfa ve rota ekleyin.

<Rota yol="bloglar" element={<Bloglar />} /> <Rota yol="iletişim" element={<İletişim />} /> <Rota yol="*" element={<NoPage />} />

Bu son rota, başka bir sayfa yoksa bir genel bilgidir. 404 için iyidir.

Çözüm

Bu öğreticinin yardımcı olduğunu ve size React'te sayfaları nasıl kolayca uygulayacağınızı gösterdiğini umuyoruz. Bu öğretici, yakın zamanda piyasaya sürülen React Route v6'yı kullanıyor – lütfen diğer birçok öğreticinin, anahtar gibi eski ve desteklenmeyen öğeleri kullanacağını bilin. Bunun arama motorları için uygun olmayacağını unutmayın, ancak kullanıcılarınızın geçmiş API'sine erişmesinin, sayfalar arasında gezinmenin ve URL değişikliğini görmenin ve genellikle uygulamanız için web sitesi benzeri özelliklere sahip olmanın bir yolunu arıyorsanız, bu sizin için harika bir yol.