Routing
BrowserRouter, As, Route, path, exact
React’de react-router-dom adında bir modül var. Adından da anlaşılacağı gibi yönlendirmeler yapmanızı sağlıyor (Ana sayfa,Hakkımızda,İletişim..vb). Başlangıç olarak npm install — save react-router-dom diyerek projemize dahil ediyoruz. BrowserRouter olarak bir nesneniz var. Bu nesneyi uygulamanızın en dışına koymanız lazım ki rooting işlemlerini yapalım. Bu noktadan itibaren daha iyi anlamanız için adım adım kod parçacıkları paylaşacağım;
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";class App extends Component {
render() {
return (
<div>
<Router>
<div>
<Route path="/" exact render={
() => {
return (<h1>Home page</h1>)
}
} />
<Route path="/contact" exact render={
() => {
return (<h1>Contact Page</h1>)
}
} />
</div>
</Router>
</div>
);
}
}export default App; Örnek 24: BrowserRouter iskeleti kurulumu.
Yukarıdaki 24. örneği biraz açıklayalım. App.js şaun benim projemin en üst componenti bu nedenle routing işlemlerini burada başlatıyorum. Dikkat etmeniz gereken bir durum var; Tagları <Router> olarak açmamın sebebi <BrowserRouter> kelime olarak çok uzun bu nedenle “As” diyerek kısalttık. <Route> react-router-dom un altında bulunan ayrı bir nesnedir. Bir konumun link ile eşleşerek componentlerinizi çağırmak istiyorsanız Route kullanmalısınız. Yukarıdaki örnekte iki adet path ataması yapıldı. Birincisi “/” şeklinde ana sayfaya, ikinci “/contact” a yönlendiriyoruz. Route render adında bir property alıyor. Bunun içerisinde bir call-back fonksiyonu tanımlayarak bir render işlemi yapıyoruz. Dikkat ettiyseniz exact adında bir property kullandık. Çünkü;
URL’de contact sayfasını çağırdığımızda bir Regular expression çalışıyor. Bu ne demek? localhost:3000/’e kadar olan kısım ana sayfam bu nedenle “Home page” i çağır, /contact/ olan kısım benim iletişim sayfam ve sayfayı çağır şeklinde olduğundan bunları ayrıştırmamız gerekiyor. Bu nedenle exact kullanıyoruz.
strict
Url kısmına “contact” ya da “contact/” yazsanız da sayfa render edilecektir. Bunun sebebi bir strict ile path alanınızı bir yapıya zorlamamanızdan kaynaklı. 24. örnekte contact routeuma strict tanımlarsam bundan sonra browser sadece “/contact” yazdığımda render edilecektir.
<Route path="/contact" scrict exact render={
() => {
return (<h1>Contact Page</h1>)
}
} />
Örnek 25: Route tanımlama örneği.
Router da stateless component
Her zaman Route’unuzun içinde sayfayı render etmek kolay olmayabilir. Route’unuzu aşağıdaki gibi de tanımlayabilirsiniz.
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";const Contact = () => {
return (<h1>Contact Page</h1>)
}class App extends Component {
render() {
return (
<div>
<Router>
<div>
<Route path="/" exact render={
() => {
return (<h1>Home page</h1>)
}
} />
<Route path="/contact" exact component={Contact} />
</div>
</Router>
</div>
);
}
}export default App; Örnek 26: Route içinde stateless component çağırmak.