+ )
+ }
+}
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(, rootElement)
+```
+
+Yukarıdaki örnek, Yüksek Düzey Bileşenin bir kullanım durumudur. Ancak kullanım alanı yalnızca basit bir butonu şekillendirmekle sınırlı değildir. Çok daha fazla kullanım alanı vardır; bileşeni yeniden kullanmamıza ve bir bileşeni stil ve işlevsellikle geliştirmemize olanak tanır. İlerleyen bölümlerde React Router'ı ele alacağız ve HOC kullanacağız; bir bileşenin başka bir bileşeni sardığını gördüğünüzde şaşırmayacaksınız.
+
+# Egzersizler
+
+## Egzersizler: Seviye 1
+
+1. Yüksek düzey fonksiyon nedir?
+2. Yüksek Düzey Bileşen nedir?
+3. Yüksek düzey fonksiyon ile yüksek düzey bileşen arasındaki fark nedir?
+4. Yüksek düzey bileşen bir bileşeni geliştirmemizi sağlar. (Doğru mu Yanlış mı?)
+
+## Egzersizler: Seviye 2
+
+1. Tüm input türlerini yönetebilen bir yüksek düzey bileşen oluşturun.
+
+## Egzersizler: Seviye 3
+
+Yakında
+
+🎉 TEBRİKLER! 🎉
+
+[<< Gün 15](../15_Gun_Üçüncü_Taraf_Paketler/15_ucuncu_taraf_paketler.md) | [Gün 17 >>](../17_Gun_React_Router/17_react_router.md)
diff --git a/Turkish/17_Gun_React_Router/17_react_router.md b/Turkish/17_Gun_React_Router/17_react_router.md
new file mode 100644
index 0000000..7d351e3
--- /dev/null
+++ b/Turkish/17_Gun_React_Router/17_react_router.md
@@ -0,0 +1,1030 @@
+
+
+[<< Gün 16](../16_Gun_Yuksek_Duzey_Bilesen/16_yuksek_duzey_bilesen.md) | [Gün 18 >>](../../18_Fetch_And_Axios/18_fetch_axios.md)
+
+
+
+- [React Router](#react-router)
+ - [React Router Nedir?](#react-router-nedir)
+ - [BrowserRouter](#browserrouter)
+ - [Route](#route)
+ - [Switch](#switch)
+ - [NavLink](#navlink)
+ - [İç İçe Yönlendirme (Nested Routing)](#i̇ç-i̇çe-yönlendirme-nested-routing)
+ - [Redirect](#redirect)
+ - [Prompt](#prompt)
+- [Egzersizler](#egzersizler)
+ - [Egzersizler: Seviye 1](#egzersizler-seviye-1)
+ - [Egzersizler: Seviye 2](#egzersizler-seviye-2)
+ - [Egzersizler: Seviye 3](#egzersizler-seviye-3)
+
+# React Router
+
+## React Router Nedir?
+
+Route veya router kelimesini daha önce duymamış olabilirsiniz ve burada tanımlamak gerekebilir. Route kelimesinin gerçek anlamı bir yol veya bir yere ulaşmanın yoludur. React'teki anlamı da gerçek anlama benzerdir. React Router, React bileşenleri arasında gezinmeyi (navigate) sağlayan bir React bileşenidir.
+
+Bu bölümde React router'ın nasıl kullanılacağına dair başlangıç yapacaksınız, ancak yeterince geniş bir kapsam olmayabilir. React Router'ın resmi web sitesinden öğrenmek isterseniz [buradan](https://reactrouter.com/web/guides/quick-start) erişebilirsiniz.
+
+Daha önce belirttiğimiz üzere React, tüm uygulamada yalnızca bir index.html sayfasının bulunduğu tek sayfalı bir uygulamadır (single page application). React Router uygulandığında, farklı bileşenler farklı mantık ve koşullara göre aynı anda veya farklı zamanlarda index.html sayfasında render edilir. React Router'ın farklı sürümleri vardır ve en son sürümü React Router 5'tir. Bu meydan okuma için React Router sürüm 4 kullanacağız. React Router paketlerini yükleyerek başlayalım.
+
+```js
+Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react$ npm install react-router-dom
+```
+
+Önceki günlerde oluşturduğumuz şablon kodları kullanarak basit bir yönlendirme uygulayalım. Her şeyden önce _react-router-dom_'u import edin, ardından yönlendirme için ihtiyaç duyduğumuz tüm bileşenleri react-router-dom'dan çıkarabilirsiniz.
+
+```js
+import React from 'react'
+import {
+ BrowserRouter,
+ Route,
+ NavLink,
+ Switch,
+ Redirect,
+ Prompt,
+ withRouter,
+} from 'react-router-dom'
+```
+
+Her projede bu bileşenlerin tamamına ihtiyaç duymayabiliriz, ancak var olduklarını bilmek faydalıdır.
+
+## BrowserRouter
+
+BrowserRouter, uygulama route'unu sarmak için kullanılan üst bileşendir. BrowserRouter kullanarak tarayıcı geçmişine (history) erişebiliriz. Bazen Router olarak yeniden adlandırılabilir.
+
+```js
+import React from 'react'
+import { BrowserRouter as Router } from 'react-router-dom'
+```
+
+BrowserRouter'ı bir React uygulaması için navigasyon oluşturmakta kullanalım.
+
+```js
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import { BrowserRouter as Router } from 'react-router-dom'
+
+class App extends Component {
+ render() {
+ return (
+
+
+
React Router DOM
+
+
+ )
+ }
+}
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(, rootElement)
+```
+
+Uygulamamızı BrowserRouter veya Router ile sardık ve her zamanki gibi sorunsuz çalışıyor. Home, About, Contact, Challenge bileşenlerini oluşturalım ve farklı bileşenlere route ekleyelim. Bileşenlere ek olarak react-router-dom'dan Route bileşenini de import etmemiz gerekiyor.
+
+## Route
+
+Route bileşeni bileşenler arasında gezinmeyi sağlar. Bir bileşenden diğerine giden bir yoldur.
+Route bileşeninin iki zorunlu prop'u vardır: path ve component veya render.
+path prop'u bileşenin render edileceği yeri, component prop'u ise o belirli path'te render edilecek bileşeni belirtir. Bileşeninizi görmek için /home route'unu isteyin.
+
+```js
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import { BrowserRouter as Router, Route } from 'react-router-dom'
+
+// Home bileşeni
+const Home = (props) =>
+
+ )
+ }
+}
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(, rootElement)
+```
+
+Yukarıdaki örnekte görüldüğü gibi tüm route'larda eğik çizgi (/) var. Home'u genellikle yalnızca eğik çizgiyle (/) oluştururuz, o zaman home için eğik çizgiyi (/) kullanalım.
+
+```js
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import { BrowserRouter as Router, Route } from 'react-router-dom'
+
+// Home bileşeni
+const Home = (props) =>
+
+ )
+ }
+}
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(, rootElement)
+```
+
+Artık / veya /about yazarak gezinmeye çalışırsanız her zaman ana sayfayı göreceksiniz. Ana sayfa route'u (/) diğer route'larda da ortak olduğundan her zaman görünür. Bunu önlemek için bir yol bulalım. Üç farklı şekilde çözebiliriz. Biri exact niteliği ile. /about/ gibi URL'nin sondaki eğik çizgiyle (/about/) bitmesini istemiyorsak, exact'e ek olarak strict niteliğini de kullanabiliriz.
+
+```js
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import { BrowserRouter as Router, Route } from 'react-router-dom'
+
+// Home bileşeni
+const Home = (props) =>
+
+ )
+ }
+}
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(, rootElement)
+```
+
+Ana sayfanın sürekli görünmesini engellemenin diğer yolu, yönlendirme sırasını ve Switch bileşenini değiştirmektir. Bunun için home route'unu en alta yerleştirmeniz yeterlidir.
+
+## Switch
+
+Switch bileşeni yalnızca bir bileşenin render edilmesine izin verir.
+
+```js
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
+
+// Home bileşeni
+const Home = (props) =>
+
+ )
+ }
+}
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(, rootElement)
+```
+
+Route hazır görünüyor ama şimdiye kadar her belirli route'u manuel olarak yazarak geziniyoruz. Her belirli route'a yönlendirilmek için NavLink bileşenini kullanalım.
+
+## NavLink
+
+NavLink bileşeni her bileşene gitmemizi sağlar. Zorunlu bir to prop'u alır. NavLink, anchor etiketinin üzerindeki bir bileşendir. Bir NavLink'e tıklamak sayfa yenilenmesi yapmaz; bu, router kullanmanın en büyük avantajlarından biridir. Aşağıdaki örneğe bakın. Önce ana sayfa için bir navigasyon uygulayalım.
+
+```js
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import {
+ BrowserRouter as Router,
+ Route,
+ Switch,
+ NavLink,
+} from 'react-router-dom'
+
+// Home bileşeni
+const Home = (props) =>
+
+ )
+ }
+}
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(, rootElement)
+```
+
+Route ve navigasyonumuz, route bulunduğu sürece mükemmel çalışıyor. Ancak bir route bulunamazsa son bileşene düşüyor. Bu sorunu önlemek için ayrı bir "sayfa bulunamadı" bileşeni oluşturup yönlendirmemize ekleyelim.
+
+```js
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import {
+ BrowserRouter as Router,
+ Route,
+ Switch,
+ NavLink,
+} from 'react-router-dom'
+
+// Home bileşeni
+const Home = (props) =>
+
+ )
+ }
+}
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(, rootElement)
+```
+
+Bir sonraki bölümde Prompt, Redirect ve withRouter bileşenlerini ele alacağız.
+
+## Redirect
+
+Redirect, bazı koşullara bağlı olarak bir route'u belirli bir path'e yönlendirmemize yardımcı olabilir. Örneğin, kullanıcı giriş yaptıysa panele (dashboard), aksi takdirde giriş sayfasına yönlendiririz. Yukarıdaki kod parçasına sahte bir giriş sistemi ekleyelim. Kullanıcı giriş yaptıysa meydan okuma sayfasına, aksi takdirde giriş yapmasını öneren sayfaya yönlendirilecek.
+
+```js
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import {
+ BrowserRouter as Router,
+ Route,
+ Switch,
+ NavLink,
+ Redirect,
+} from 'react-router-dom'
+
+// Home bileşeni
+const Home = (props) =>
+
+
+ 
+
+
+Yazar:
+Asabeneh Yetayeh