React Router, React'ta yönlendirme için standart bir kütüphanedir. Bir React uygulamasındaki farklı bileşenlerin görünümleri arasında gezinmeyi sağlar, tarayıcı URL'sinin değiştirilmesine olanak tanır ve kullanıcı arayüzünü URL ile senkronize halde tutar.
React Router'ın nasıl çalıştığını anlamak için React için basit bir uygulama oluşturalım. Uygulama ev, hakkında ve iletişim bileşenlerini içerecektir. Bu bileşenler arasında gezinmek için React Router kullanacağız.
npx oluştur-tepki-uygulaması
Geliştirme ortamınız hazır. Şimdi uygulamamıza React Router’ı kuralım.
Reaksiyon Yönlendiricisi : React Router, React uygulamanıza npm aracılığıyla kurulabilir. React uygulamanızda Yönlendiriciyi kurmak için aşağıdaki adımları izleyin:
Adım 1: Proje dizininizdeki CD, yani ., Java.
Adım 2: React Router’ı kurmak için aşağıdaki komutu kullanın:
npm kurulumu - -save react-router-dom
react-router-dom'u yükledikten sonra bileşenlerini React uygulamanıza ekleyin.
React Yönlendirici Bileşenlerini Ekleme:
React Router'ın ana bileşenleri şunlardır:
Sırayla ilerlemek yerine rotalar en iyi eşleşmeye göre seçilir.
React Router bileşenlerini uygulamanıza eklemek için kullandığınız editörde proje dizininizi açın ve app.js dosyasına gidin. Şimdi aşağıdaki kodu app.js'ye ekleyin.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Not: TarayıcıRouter'ın takma adı Yönlendiricidir.
React Router'ı Kullanma: React Router'ı kullanmak için öncelikle React uygulamasında bazı bileşenler oluşturalım. Proje dizininizde, src klasörünün içinde bileşenler adında bir klasör oluşturun ve şimdi bileşenler klasörüne home.js, about.js ve contact.js adlı 3 dosya ekleyin.
3 bileşenimize bazı kodlar ekleyelim:
Home.js:
import React from 'react'; function Home (){ return } export default Home; About.js:
import React from 'react'; function About () { return <h2> jAVAtPOINT is a computer science portal for TUTORIALS!</h2> Read more about us at : <a href="https://www.javatpoint.in/about/"> https://www.javatpoint.in/about/ </a> } export default About; Contact.js:
import React from 'react'; function Contact (){ return You can find us here: <br> Javatpoint <br> G-13, second floor, Sector -3 Noida <br> Noida, Uttar Pradesh (201305) } export default Contact; Şimdi uygulamaya React Router bileşenlerini dahil edelim:
TarayıcıYönlendirici : Diğer tüm bileşenleri sarmak için app.js dosyanıza yönlendirici olarak takma ad verilmiş bir TarayıcıRouter ekleyin. TarayıcıRouter bir ana bileşendir ve yalnızca bir alt bileşeni olabilir.
class App extends Component { render() { return ( ); } } Bağlantılar: Şimdi bileşenlerimizin bağlantılarını oluşturalım. Bağlantı bileşeni, bağlantının gitmesi gereken konumu tanımlamak için destekleri kullanır.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Şimdi uygulamanızı yerel ana bilgisayarda çalıştırın ve oluşturulan bağlantıya tıklayın. URL'lerin bağlantı bileşeninin değerine göre değiştiğini fark edeceksiniz.
Rota : Rota bileşeni, bileşenin kullanıcı arayüzü ile URL arasında bağlantı kurmamıza yardımcı olacaktır. Rotayı uygulamaya dahil etmek için aşağıdaki kodu app.js'nize ekleyin.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Bileşenler artık bağlanmıştır ve herhangi bir bağlantıya tıklamak ilgili bileşeni oluşturacaktır. Şimdi kök bileşenle ilişkili destekleri anlamaya çalışalım.
- Öğe, yolun eşleşmesi durumunda oluşturulacak bileşeni ifade eder.
Not: Varsayılan olarak rotalar kapsayıcıdır; bu, birden fazla rota bileşeninin bir URL yoluyla eşleşebileceği ve aynı anda oluşturulabileceği anlamına gelir. Eğer tek bir bileşeni render etmek istiyorsak burada rotaları kullanmamız gerekiyor.
Rotalar : Tek bir bileşeni okumak için tüm tesisatları Tesisatlar bileşeninin içine sarın.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Grupları birden fazla rota arasında değiştirin, üzerlerinde yineleyin ve yolla eşleşen ilkini bulun. Böylece yolun karşılık gelen bileşeni oluşturulur.
Tüm bileşenleri ekledikten sonra tam kaynak kodumuz:
import React, { Component } from 'react'; import { BrowserRouter as Router,Routes, Route, Link } from 'react-router-dom'; import Home from './component/home'; import Contact from './component/contact'; import About from './component/about'; import './App.css'; class App extends Component { render() { return ( <ul classname="App-header"> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul> <route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> ); } } export default App; </route></route></route> Artık bağlantıya tıklayıp farklı bileşenlerde gezinebilirsiniz. React Router, uygulama kullanıcı arayüzünüzü URL ile senkronize tutar.
Son olarak React Router kullanarak React uygulamamızda navigasyonu başarıyla gerçekleştirdik.
Kullanıcı arayüzünüzü URL ile senkronize tutmak için HTML5 geçmiş API'sini (pushstate, replacementstate ve popstate olayları) kullanan bir.
taban adı: dize
Tüm konumlar için temel URL. Uygulamanız sunucunuzdaki bir alt dizinden sunuluyorsa onu bu alt dizine ayarlamak isteyeceksiniz. Düzgün biçimlendirilmiş bir temel adın başında bir eğik çizgi bulunmalıdır, ancak sonunda eğik çizgi olmamalıdır.
1 milyon sayı
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: işlev
Gezinmeyi onaylamak için kullanılacak bir işlev. Varsayılan olarak window.confirm kullanılır.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> ForceRefresh: bool
Doğruysa, Yönlendirici sayfadaki gezinmeyi tam sayfa yenilemeyi kullanacaktır. Sunucu tarafından oluşturulan geleneksel bir uygulamanın, sayfada gezinme arasında tam sayfa yenilemeleriyle nasıl çalışacağını taklit etmek için bunu kullanmak isteyebilirsiniz.
anahtar Uzunluğu: sayı
Konumun uzunluğu. Anahtar. Varsayılan 6'dır.
çocuklar: düğüm- oluşturulacak alt öğe.
Not: React'ta render yöntemi birden fazla öğe döndüremediğinden tek bir alt öğe kullanmanız gerekir. Birden fazla öğeye ihtiyacınız varsa bunları ek bir veya içine sarmayı deneyebilirsiniz.
Kullanıcı arayüzünüzü URL ile senkronize tutmak için URL'nin karma kısmını (ör. window.location.hash) kullanan bir.
Not: karma, geçmiş konumunu desteklemez. Anahtar veya konum. Durum. Önceki sürümlerde davranışı azaltmaya çalıştık ancak çözemediğimiz uç durumlar vardı. Bu davranışı gerektiren herhangi bir kod veya eklenti çalışmayacaktır.
Bu teknolojinin yalnızca eski tarayıcıları desteklemesi amaçlandığından, sunucunuzu bunun yerine çalışacak şekilde yapılandırmanızı öneririz.
taban adı: dize
Tüm konumlar için temel URL. Düzgün biçimlendirilmiş bir temel adın başında eğik çizgi olmalı, ancak sonunda eğik çizgi olmamalıdır.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: işlev
Gezinmeyi onaylamak için kullanılacak bir işlev. Varsayılan olarak window.confirm kullanılır.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: dize
için kullanılan kodlama window.location.hash . Mevcut değerler şunlardır:
- 'eğik çizgi' - #/ ve #/sunshine/lollipops gibi karmalar oluşturur
- 'noslash' - # ve #güneş ışığı/lolipoplar . hash'in yarattığı gibi
- 'hashbang' - #!/ ve #!/sunshine/lollipops gibi 'taranabilir ajax' (google tarafından kullanımdan kaldırılmıştır) karmaları oluşturur
Varsayılan 'eğik çizgi'dir.
çocuklar: düğüm
İşlenecek tek bir alt öğe.
Uygulamanız etrafında bildirime dayalı, erişilebilir gezinme sağlar.
About
için: dize
Bir bağlantı konumunun dize temsili, konumun yol adı, arama ve karma özelliklerinin birleştirilmesiyle oluşturulur.
Aşağıdaki özelliklerden herhangi birine sahip olabilecek bir nesne:
için: işlev
Geçerli konumun argüman olarak iletildiği ve konum gösterimini bir dize veya nesne olarak döndürmesi gereken bir işlev.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> değiştir: bool
Doğru olduğunda, Bağlantıya tıklamak yeni bir giriş eklemek yerine mevcut girişin yerini alacaktır.
entry to the history stack.
dahili referans: işlev
React Router 5.1'den itibaren, eğer React 16 kullanıyorsanız, referansı temeldeki öğeye ilettiğimiz için bu desteğe ihtiyacınız olmamalıdır. . Bunun yerine normal bir referans kullanın.
Bileşenin yerleşik referansına erişim sağlar.
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> içRef: RefObject
React Router 5.1'den itibaren, eğer React 16 kullanıyorsanız, bu desteğe ihtiyacınız olmamalıdır çünkü referansı temeldeki öğeye iletmekteyiz. . Bunun yerine normal bir referans kullanın.
React.createRef'i kullanarak bileşenin temel referansını alın.
lateks metin boyutu
let anchorRef = React.createRef()
bileşen: React.Component
Kendi navigasyon bileşeninizi kullanmak istiyorsanız, bunu bileşen pervanesinden geçirerek yapabilirsiniz.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Ayrıca olmak istediğiniz sahne malzemelerini de iletebilirsiniz. başlık, kimlik, sınıfAdı vb. gibi.
Bunun özel bir sürümü, mevcut bir URL ile eşleşiyorsa, oluşturulan öğeye stil özellikleri ekleyecektir.
About
sınıfAdı: dize | işlev
className bir dize veya dize döndüren bir işlev olabilir. className işlevi kullanılıyorsa, bağlantının aktif durumu parametre olarak iletilir. Etkin olmayan bir bağlantıya özel olarak bir className uygulamak istiyorsanız bu kullanışlıdır.
'nav-link' + (!isActive ? ' unselected' : '') } >
SSS
React Router v6'da activeClassName kaldırılacak ve sınıf adını aktif veya aktif olmayan NavLink bileşenlerine uygulamak için className fonksiyonunu kullanmalısınız.
ActiveClassName: Dize
Öğe aktif olduğunda verilecek sınıf. Varsayılan olarak verilen sınıf etkindir. Sınıf adı pervanesi ile birleştirilecektir.
stil: nesne | işlev
style, bir React.CSSProperties nesnesi veya stil nesnesi döndüren bir işlev olabilir. İşlev stili kullanılırsa bağlantının aktif durumu parametre olarak iletilir.
({ color: isActive ? 'green' : 'blue' })} > React Router v6'da aktif stil kaldırılacaktır ve satır içi stilleri aktif veya aktif olmayan NavLink bileşenlerine uygulamak için fonksiyon stilini kullanmanız gerekir.
Aktif Stil: Nesne
Etkin olduğunda öğeye uygulanan stiller.
<navlink to="/faq" activestyle="{{" fontweight: 'bold', color: 'red' }} < pre> <h3>exact: bool</h3> <p>When true, the active class/style will only apply if the location is an exact match.</p> <pre> Profile </pre> <h3>strict: bool</h3> <p>If true, the trailing slash on a location's pathname will be considered when determining whether the location matches the current URL. See the documentation for more details.</p> <pre> Events </pre> <h3>isActive: func</h3> <p>A function to add additional logic to determine if the Link is active. This should be used when you want to do more than verify that the pathname of the Link matches the pathname of the current URL.</p> <pre> { if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 </pre> <h3>location: object</h3> <p>isActive Compares to the current history location (usually the current browser URL).</p> <h3>aria-current: string</h3> <p> <strong>The value of the area-current attribute used on the active Link. Available values are:</strong> </p> <ul> <li>'page' - used to indicate a link within a set of pagination links</li> <li>'Steps' - used to indicate a link within the step indicator for a step-based process</li> <li>'location' - used to indicate an image that is visually highlighted as the current component of the flow chart</li> <li>'date' - used to indicate the current date within the calendar</li> <li>'time' - used to indicate the current time within a timetable</li> <li>'true' - used to indicate whether NavLink is active</li> <li>'false' - used to prevent assistive technologies from reacting to the current Link (one use case would be to prevent multiple area-current tags on a page)</li> </ul> <hr></navlink> katı: bool
Doğruysa, konumun geçerli URL'yle eşleşip eşleşmediği belirlenirken konumun yol adının sonundaki eğik çizgi dikkate alınır. Daha fazla ayrıntı için belgelere bakın.
Events
Aktif: işlev
Bağlantının etkin olup olmadığını belirlemek için ek mantık ekleyen bir işlev. Bu, Bağlantının yol adının mevcut URL'nin yol adıyla eşleştiğini doğrulamaktan daha fazlasını yapmak istediğinizde kullanılmalıdır.
{ if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 konum: nesne
isActive Geçerli geçmiş konumuyla karşılaştırır (genellikle geçerli tarayıcı URL'si).
aria-current: dize
Etkin Bağlantıda kullanılan alan-akım özelliğinin değeri. Mevcut değerler şunlardır:
- 'sayfa' - bir dizi sayfalandırma bağlantısı içindeki bir bağlantıyı belirtmek için kullanılır
- 'Adımlar' - adıma dayalı bir süreç için adım göstergesi içindeki bağlantıyı belirtmek için kullanılır
- 'konum' - akış şemasının geçerli bileşeni olarak görsel olarak vurgulanan bir görüntüyü belirtmek için kullanılır
- 'tarih' - takvimdeki geçerli tarihi belirtmek için kullanılır
- 'zaman' - bir zaman çizelgesi içindeki geçerli saati belirtmek için kullanılır
- 'doğru' - NavLink'in etkin olup olmadığını belirtmek için kullanılır
- 'false' - yardımcı teknolojilerin mevcut Bağlantıya tepki vermesini önlemek için kullanılır (bir kullanım örneği, bir sayfada birden fazla alan-akım etiketinin önlenmesi olabilir)