React projesi içerisinde, single page application uygulamalarında, sayfa refresh olmadan kullanıcının gezinmesini sağlayan bileşendir.
React Router'ın genel yapısını aşağıda çizmeye çalıştım.
React Router kullanımı ile ilgili aşağıda bir kaç husus belirtilmiştir.
Tüm routing işlemleri bu komponent içerisinde gerçekleşir, Komponent hiyerarşisinin en üstünden olması beklenir.
kullanıcının eylem veya isteğe göre farklı sayfalara yönlendirildiği bir süreçtir. React Router esas olarak tek sayfa web uygulamaları geliştirmek için kullanılır.
Uygulamada birden fazla route tanımlamak için kullanılır.
React üzerine kurulu standart bir kütüphane sistemidir. React Router Package kullanarak React uygulamasında yönlendirme oluşturmak için kullanılır.
react-router | React Router uygulamaları için temel yönlendirme bileşenlerini ve işlevlerini sağlar. |
react-router-native | Mobil uygulamalar için kullanılır. |
react-router-dom | Web uygulamaları tasarımı için kullanılır. |
Projemizdee Route kullanabilmemiz için bu paketi indirmemiz gerekmektedir.
Router : Birden fazla route tanımlanacağı zaman Router içerisinde Route tanımlaması yapılmaktadır.
Route : Erişilmek istenen komponentin tanımı burada yapılır. Path prop’u ile hangi url üzerinden erişileceği belirlenir.
Exact : true olduğunda path in tamamı ile eşleştirildiğinde ilgili sayfayı açacaktır.
CONFIGURATION ROUTES
<BrowserRouter> : Dinamik URL işlemek için kullanılır. Routes kullanabilmemiz için yapmamız gereken ilk adım, BrowserRoute un tanımlanmasıdır.
Uygulama LifeCycle ında en tepede olması gerekmektedir.
App.js veya Index.js içerisinde BrowserRoute tanımlanabilir.
useNavigate
Komponent içerisinden başka bir komponent açmak için kullanılır.
Go Back : Bir önceki komponent e geri gidebilmek için navigate(-1) şeklinde bir kullanımı vardır.
NOT :{replace:true} : bu özellikte tarayıcı tarafından bir geri dönüş olur.
NESTED ROUTE
Komponent içerisinde farklı bir route yapılmak istenebilir.
Product komponent içerisinde yine bir route tanımlama işlemi yapılmıştır.
OUTLET <outlet/> KAVRAMI
Komponent içerisinde yine bir route yapılmak istenir ise, Route kurgusu yapılacak olan komponent içerisinde tanımlanır.
Tab yapısı olarak düşünülebilir.
LINK KULLANIMI
Single page application uygulamalarında temel mantık aynı sayfada sayfa yenilenmeden istenilen komponentin sayfaya çağrılmasıdır.
Yukarıdaki gibi standart <a> kullanımı sonucunda sayfa yenilenecektir.
<a> etiketi yerine react-dom elementi olan Link kullanılır ise sayfa yenilenme problemi ortadan kalkacaktır.
import React from 'react'
import {Link,NavLink,withRouter} from 'react-router-dom'
const Navbar = (props) => {
console.log(props);
return (
<nav className="nav-wrapper red darken-2">
<div className="container">
<a href="/" className="brand-logo">Anasayfa</a>
<ul className="right">
<li><Link to="/">Anasayfa</Link></li>
<li><Link to="/about">Hakkımızda</Link></li>
<li><Link to="/contact">İletişim</Link></li>
</ul>
</div>
</nav>
)
}
export default withRouter(Navbar);NAVLINK KULLANIMI
NavLink de Link gibi kullanıma sahiptir, Linklere style vb gibi bilgi set etmemiz gerektiğinde kullanırız.
Detaylı bilgiye https://reactrouter.com/web/api/NavLink adresinden ulaşabilirsiniz.
Yukarıdaki gibi örnekte, NavLink kullanılarak IsActive fonksiyonu setlenebilir ve kullanımı sağlanabilir. Bu gibi durumlarda sayfaların yetkilendirmesi yapılabilir.
<NavLink to="/contact" activeStyle={{
fontWeight: "bold",
backgroundColor: "blue"
}}>İletişim</NavLink>
DYNAMIC ROUTE
Sayfalar arası geçişlerde, redirect olan komponente bir parametre gönderşlecek ise, Bunu QueryString mantığı ile düşünebilirsiniz.
useParams, gönderilen bilgileri karşılamak için kullanılır.
Github projesine buradan ulaşabilirsiniz.
#React #Router #Exact #BrowserRoute #Route #Link #NavLink #Outlet #DaynamicRoute #useParam #NestedRoute
Comentarios