React Router ile Dinamik Arama Motoru Yapıları

Adı : React Router ile Dinamik Arama Motoru Yapıları

React Router, React uygulamalarında birden fazla sayfa oluşturmayı ve sayfalar arasında geçiş yapmayı sağlayan bir kütüphanedir. Dinamik arama motoru yapıları oluşturmak için de kullanılabilir. Bu yazıda, React Router kullanarak dinamik arama motoru yapıları nasıl oluşturulur ve ne işe yarar, bunu detaylı bir şekilde açıklayacağız.

Dinamik Arama Motoru Nedir?

Dinamik arama motoru, kullanıcıların arama sorgularına göre veri aldığı ve arama sonuçlarını anlık olarak gösterdiği bir yapıdır. Kullanıcıların arama sonuçlarına daha hızlı erişmelerini sağlar. Çeşitli sektörlerde kullanılmaktadır. Örneğin, e-ticaret sitelerinde, müşterilerin aradıkları ürünlere kolayca ulaşmalarına yardımcı olur.

Örnek: E-ticaret sitesinde bir kullanıcı ayakkabı araması yaptığında, sadece ayakkabılarla ilgili sayfalar gösterilir. Bu sayfalarda ilgili ürünlere ait özellikler, fiyatlar, markalar, bedenler yer alır ve kullanıcılar bu sayfalar aracılığıyla ürünleri filtreleyip, ürün detaylarını görebilir.

React Router ile Dinamik Arama Motoru Nasıl Yapılır?

React Router kullanarak dinamik arama motoru yapısı oluşturmak oldukça kolaydır. İlk olarak, projeye React Router kurulumu yapılmalıdır.

1. React Router Kurulumu

React Router, npm paket yöneticisi aracılığıyla yüklenir:

```
npm install react-router-dom
```

2. Arama Sayfası Oluşturma

Arama motoru yapılarında, kullanıcıların arama sorgularını giriş yapabilecekleri bir sayfa olması gerekmektedir. Bu sayfayı oluşturmak için, bir component tasarlanır:

```jsx
import { useState } from 'react';
import { useHistory } from 'react-router-dom';

function Search() {
const [query, setQuery] = useState('');
const history = useHistory();

const handleSubmit = (event) => {
event.preventDefault();
history.push(`/search/${query}`);
setQuery('');
};

return (

setQuery(e.target.value)} />
Search

);
}

export default Search;
```

Bu component, arama sorgusu girilecek bir input alanı ve arama butonunu içerir. Form submit işlemi gerçekleştiğinde, `history.push()` fonksiyonu kullanılarak, arama sonuçları sayfasına aktarılır.

3. Arama Sonuçları Sayfası Oluşturma

Arama sonuçları sayfası, kullanıcının arama sorgusuna göre verilerin listelendiği bir sayfadır. Bu sayfayı oluşturmak için, bir component tasarlanır:

```jsx
import { useParams } from 'react-router-dom';

function SearchResults() {
const { query } = useParams();

return (

);
}

export default SearchResults;
```

Bu component, `useParams()` hook'u kullanarak, arama sorgusu parametresini alır ve arama sonuçlarını listeler.

4. Route Yapısının Oluşturulması

Route yapısı, her bir sayfanın URL'sine göre ayarlanmasını sağlar. Bu yapının tasarımı, aşağıdaki gibi olabilir:

```jsx
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Search from './components/Search';
import SearchResults from './components/SearchResults';

function App() {
return (






);
}

export default App;
```

Bu yapı, `/` route'unun, `Search` component'ına, `/search/:query` route'unun ise `SearchResults` component'ına bağlandığını gösterir.

5. Dinamik Arama Sonuçları

Son olarak, arama sonuçları dinamik hale getirilmelidir. Bu sayede, gerçek bir dinamik arama motoru yapısı oluşturulmuş olur. Dinamik arama sonuçları oluşturmak için, bir API kullanarak veri çekmek gerekmektedir. Örnek olarak, `jsonplaceholder` API'si kullanılabilir:

```jsx
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

function SearchResults() {
const { query } = useParams();
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(false);

useEffect(() => {
async function fetchResults() {
setLoading(true);
const response = await fetch(`https://jsonplaceholder.typicode.com/posts?q=${query}`);
const data = await response.json();
setResults(data);
setLoading(false);
}
fetchResults();