Adı : React Router ile Sayfa Animasyonu Yapma

React Router ile Sayfa Animasyonu Yapma

React Router, React uygulamalarını yönetmek için kullanılan bir kütüphanedir. İki farklı türde yönlendirme yapmakta kullanılabilir: Client-side routing ve Server-side routing. Client-side routing, URL’nin değişmesini engelleyerek kullanıcının sayfa yenilemeden farklı sayfalara geçmesini sağlar. Bu makalede, React Router kullanarak sayfa animasyonu yapmayı öğreneceğiz.

React Router’a başlamadan önce, animasyonlara ihtiyacımız var. Bunun için, CSS animasyonları veya React animasyonlarını kullanabiliriz. İki yöntemi de ele alacağız.

Örnek 1: CSS Animasyonu

İlk örnek, CSS animasyonları kullanarak sayfa geçişleri yapmak olacaktır.

1. Adım: Animasyonlu Router oluşturun

İlk olarak, animasyonlu router komponentini oluşturmalıyız. Bu komponent, geçiş animasyonunu gerçekleştirir.

```js
import React from 'react';
import { CSSTransition } from 'react-transition-group';
import { Switch, Route } from 'react-router-dom';
import './styles.css';

const AnimatedRouter = () => {
return (
(





)}>

)
}
```

2. Adım: Transitions Tanımlama

Sonraki adım, animasyonları belirtmektir. Bu örnekte, geçiş animasyonlarını CSS ile tanımlayacağız.

```css
/* Giriş Animasyonları */
.fade-enter {
opacity: 0;
z-index: 1;
}

.fade-enter-active {
opacity: 1;
transition: opacity 300ms ease-in-out;
}

/* Çıkış Animasyonları */
.fade-exit {
opacity: 1;
}

.fade-exit-active {
opacity: 0;
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: opacity 300ms ease-in-out;
}
```

3. Adım: Animasyon Komponenti

Son adım, tüm bu parçaları birleştirerek animasyon komponentini oluşturmaktır:

```js
import React from 'react';
import { CSSTransition } from 'react-transition-group';
import { Switch, Route } from 'react-router-dom';
import './styles.css';

const AnimatedRouter = () => {
return (
(





)}>

)
}

const Home = () => {
return (

)
}

const About = () => {
return (

)
}

const Blog = () => {
return (

)
}

const AnimatedRoute = () => {
return (

)
}

export default AnimatedRoute
```

Örnek 2: React Animasyonları

Diğer bir seçenek, React animasyonlarını kullanarak sayfa geçişlerini oluşturmaktır. Bu örnekte, animasyonların hangi bileşenlerin eklendiğine veya kaldırıldığına bağlı olarak yapıldığı anlamına gelen bir animasyon yönetim kütüphanesi olan React Transition Group kullanacağız.

1. Adım: Transition Group Oluşturma

İlk olarak, sayfalarımızı bir geçiş grubuna yerleştiririz:

```js
import React from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { Switch, Route, withRouter } from 'react-router-dom';
import './styles.css';

const AnimatedRouter = withRouter(({ location }) => {
return (

key={location.key}
classNames=\"fade\"
timeout={300}
>







)
})
```

2. Adım: CSS Animasyonlarını Tanımlama

Bu adımda, geçiş animasyonunu CSS ile tanımlamalıyız. Bu örnekte, bir giriş animasyonu ve bir çıkış animasyonu var:

```css
/* Giriş Animasyonları */
.fade-enter {
opacity: 0;
z-index: 1;
}

.fade-enter-active {
opacity: 1;
transition: opacity 300ms ease-in-out;
}

/* Çıkış Animasyonları */
.fade-exit {
opacity: 1;
}

.fade-exit-active {
opacity: 0;
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: opacity 300ms ease-in-out;
}
```

3. Adım: Animasyonlu Komponenti Oluşturma

Son adım, tüm parçaları birleştirmek ve animasyonu oluşturmaktır. Bu örnekte, animasyonlu router komponentini, animasyonları tanımladığımız CSS sınıflarıyla birleştiriyoruz.

```js
import React from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { Switch, Route, withRouter } from 'react-router-dom';
import './styles.css';

const AnimatedRouter = withRouter(({ location }) => {
return (

key={location.key}
classNames=\"fade\"
timeout={300}
>







)
})

const Home = () => {
return (

)
}

const About = () => {
return (

)
}

const Blog = () => {
return (

)
}

const AnimatedRoute = () => {
return (

)
}

export default AnimatedRoute
```

Sık Sorulan Sorular

S: React Router Animasyonları neden önemlidir?
C: Animasyonlar, bir kullanıcının web sitesinde gezinirken bir sayfadan diğerine geçtiğinde, sitedeki kullanıcı deneyimini geliştirir. Animasyonlar, web sitesi kullanıcısının daha akıcı bir deneyim yaşamasına yardımcı olur. Buna ek olarak, animasyonlar, sitenizdeki bir şeyin değiştiğini göstererek kullanıcılara yardımcı olabilir.


S: Sayfa geçiş animasyonları neden kullanışlıdır?
C: Sayfa geçiş animasyonları, kullanıcıların sitenizde neler olup bittiğini anlamalarına yardımcı olur ve siteye derinlemesine bağlanmalarına yardımcı olur. Kullanıcılara, gezinmelerinin kesintiye uğramadan, daha doğal bir şekilde ilerlemesine izin verir. Buna ek olarak, animasyonlu geçişler, bir sayfanın kaynaklarının önbellekleme ve aktarım süresini kısaltarak web sitesinin hızlı gelmesini sağlayabilir.

S: Hangi animasyon düzenleyicisini kullanmalıyım?
C: Animasyon düzenleyicisi olarak her iki seçenek de iyi bir seçim olabilir. CSS animasyonları, kolayca anlaşılabilen, düzenlenebilir ve hemen hemen her tarayıcıda desteklenen bir yöntemdir. Ancak, animasyon düzenlemeleri için daha fazla özelleştirme gerektiren compex animasyonlar için React animasyonları daha yararlı olabilir."