Resmi dokümanları okursam anlamamı biraz zorlaştıran programlamada yeniyim.

Buradan React Router 4 hakkında okuyordum

Bu yazıda yazar <HashRouter>ve<BrowserRouter>

Bahsettiği bu

HashRouter , bileşeni oluşturmak için temelde URL'deki hash'i kullanır. Tek sayfalık statik bir web sitesi oluşturduğum için, bunu kullanmam gerekiyordu.

BrowserRouter , bileşeni oluşturmak için HTML5 geçmiş API'sini kullanır. Geçmiş, pushState ve replaceState aracılığıyla değiştirilebilir. Daha fazla bilgi burada bulunabilir

Diyor Şimdi, ben her ikisi için önemi ve kullanım durumlarını alamadım gibi ne demek istiyor geçmişi pushState ve replaceState yoluyla değiştirilebilir ve bu bileşeni işlemek için URL'de karma kullanır

BrowserRouter için ilk açıklama benim için tamamen belirsiz olsa da, HashRouter ile ilgili ikinci açıklama da mantıklı değil, örneğin birisi bileşeni oluşturmak için url'de Hash (#) kullansın?

BrowserRouter

Geçmiş API'sini kullanır , yani eski tarayıcılar (IE 9 ve altı ve çağdaşlar) için kullanılamaz. İstemci tarafı React uygulaması example.com/react/route gibi temiz rotaları koruyabilir ancak web sunucusu tarafından desteklenmelidir. Genellikle bu, web sunucusunun tek sayfalı uygulama için yapılandırılması gerektiği anlamına gelir, yani aynı / tepki / yol yolu veya sunucu tarafındaki başka herhangi bir yolindex.html için sunulur . İstemci tarafında, React yönlendiricisi tarafından ayrıştırılır. React yönlendiricisi, / react / route için işlemek üzere yapılandırıldığı bir bileşeni oluşturur .window.location.pathname

Ek olarak, kurulum sunucu tarafında işlemeyi index.htmliçerebilir, işlenmiş bileşenleri veya mevcut yola özgü verileri içerebilir.

HashRouter

URL karma kullanır, desteklenen tarayıcılara veya web sunucusuna herhangi bir sınırlama getirmez. Sunucu tarafı yönlendirme, istemci tarafı yönlendirmeden bağımsızdır.

Geriye dönük uyumlu tek sayfalı uygulama, bunu example.com/#/react/route olarak kullanabilir . Sunucu tarafında sunulan / yol olduğundan, kurulum sunucu tarafında işleme tarafından yedeklenemez , # / react / route URL karması sunucu tarafından okunamaz. İstemci tarafında, window.location.hashReact yönlendiricisi tarafından ayrıştırılır. React yönlendiricisi , benzer şekilde / tepki / yönlendirme için oluşturmak üzere yapılandırıldığı bir bileşeni oluşturur BrowserRouter.

En önemlisi, HashRouterkullanım durumları SPA ile sınırlı değildir. Bir web sitesinde eski veya arama motoru dostu sunucu tarafı yönlendirmesi olabilirken, React uygulaması example.com/server/side/route#/react/route gibi URL'deki durumunu koruyan bir widget olabilir . React uygulamasını içeren bir sayfa sunucu tarafında / server / side / route için sunulur , ardından istemci tarafında React yönlendiricisi önceki senaryoya benzer şekilde / react / route için yapılandırıldığı bir bileşen oluşturur .

SUNUCU TARAFI: HashRouter, URL'de bir karma sembolü kullanır ve bu, sunucu isteğinde sonraki tüm URL yolu içeriğinin yok sayılmasına neden olur (yani "www.mywebsite.com/#/person/john" adresini gönderirsiniz, sunucu alır "www .mywebsite.com ". Sonuç olarak, sunucu # URL öncesi yanıtını döndürecektir ve ardından posta # yolu, istemci tarafındaki tepki uygulamanız tarafından çözümlenerek işlenecektir.

İSTEMCİ TARAFI: BrowserRouter # sembolünü URL'nize eklemeyecektir, ancak bir sayfaya bağlanmaya veya bir sayfayı yeniden yüklemeye çalıştığınızda sorunlar yaratacaktır. İstemci tepki uygulamanızda açık rota mevcutsa ancak sunucunuzda yoksa, yeniden yükleme ve bağlama (doğrudan sunucuya isabet eden herhangi bir şey) 404 bulunamadı hataları döndürür.

Hem BrowserRouterhem de HashRouterbileşenler React Router sürüm 4'te sınıfın alt sınıfları olarak tanıtıldı Router. Basitçe, BrowserRouterkullanıcı arayüzünü tarayıcınızdaki mevcut URL ile senkronize eder, Bu, HTML-5 Geçmiş API'si aracılığıyla yapılır. Öte yandan, HashRoutersenkronize etmek için URL'nizin Hash kısmını kullanır.

"Kullanım Durumları"

HashRouter: Arka uca ihtiyaç duymayan küçük istemci tarafı uygulamalarımız HashRouterolduğunda kullanabiliriz çünkü URL / konum çubuğu tarayıcısında hash kullandığımızda bir sunucu isteği yapmaz.

BrowserRouter: Arka uca hizmet veren üretime hazır büyük uygulamalarımız olduğunda kullanılması tavsiye edilir <BrowserRouter>.

Kitaba göre referans: Learning React: React ve Redux ile İşlevsel Web Geliştirme Alex Banks, Eve Porcello

Sayfanın yenilenmesi, tarayıcının mevcut yolu kullanarak sunucuya bir GET isteği göndermesine neden olur. # İşareti, bu GET isteğini göndermemizi engellemek için kullanıldı. BrowserRouter'ı kullanıyoruz çünkü GET isteğinin sunucuya gönderilmesini istiyoruz. Yönlendiriciyi sunucuda işlemek için bir konuma ihtiyacımız var - rotaya ihtiyacımız var. Bu yol, yönlendiriciye ne işleyeceğini söylemek için sunucuda kullanılacaktır. BrowserRouter, rotaları izomorfik olarak oluşturmak istediğinizde kullanılır.

Eklemek istediğim bir kullanım durumu daha. BrowserRouter veya Router kullanırken, düğüm sunucumuzda sorunsuz çalışacaktır. Çünkü istemci yönlendirmesini anlıyor (Önceden yapılandırılmış).

Ancak, derleme React uygulamamızı Apache sunucusunda (sadece GoDaddy'de PHP diyelim) konuşlandırırken, yönlendirme beklendiği gibi çalışmayacaktır. .Htaccess dosyasını yapılandırmamız gerekmesi için 404'e inecek . Bundan sonra da benim için her tıklama / url, sunucuya istek gönderiyor.

Bu durumda HASH Routing (#) kullanmalıyız. # bunu html sayfamızda HTML içeriğinde gezinmek için kullanıyoruz ve bu sunucu talebine yol açmayacaktır.

Yukarıdaki senaryoda HashRouting'i kullanabiliriz, yani # sonra gelen url'lerin tamamı, yönlendirme kurallarımızı SPA olarak çalıştırabiliriz.

Temel olarak, BrowserRouter kullanılıyorsa "soAndSoReactPage /: id" gibi bir url kullanılabilir.

Örneğin:

with a Route <Route path="soAndSoReactPage/:id"><soAndSoReactComponent/></Route>

şimdi, "soAndSoReactComponent" react bileşeninde "id" daha sonra useParams kullanılarak çıkarılabilir ve böylece kimliğe göre "soAndSoReactComponent" sayfasını görüntüleyebilirsiniz

HashedRouter ile böyle bir şey yapılamaz,